HTML Web Storage 存储

前言

• 使用 HTML5 可以在本地存储用户的浏览数据，HTML5 Web 存储，一个比 Cookie 更好的本地存储方式。

• 早些时候，本地存储使用的是 Cookie。但是 Web 存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。

• 数据以 键/值 对存在, Web 网页的数据只允许该网页访问使用。

1、Web 存储

• 客户端存储数据的两个对象为:

标签	描述
localStorage	用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
sessionStorage	用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据

• 在使用 Web 存储前，应检查浏览器是否支持 localStorage 和 sessionStorage。

  <script>
       if (typeof (Storage) !== "undefined") {
           // 支持 localStorage sessionStorage 对象!
           // 一些代码.....
       } else {
           // 抱歉! 不支持 web 存储。
       }
  </script>

2、API

• 不管是 localStorage，还是 sessionStorage，可使用的 API 都相同，常用的有如下几个（以 localStorage 为例）：

API	描述
localStorage.setItem(key, value)	保存数据
localStorage.getItem(key)	读取数据
localStorage.removeItem(key)	删除单个数据
localStorage.clear()	删除所有数据
localStorage.key(index)	得到某个索引的 key

• 提示: 键/值 对通常以字符串存储，你可以按自己的需要转换该格式。

3、作用域

• 这里的作用域指的是：如何隔离开不同页面之间的 localStorage，总不能在百度的页面上能读到腾讯的 localStorage 吧。

  

• localStorage 只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份 localStorage 数据。

• sessionStorage 比 localStorage 更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

4、localStorage 对象

• localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

• 示例

  <div id="result"></div>
  
  <script>
       if (typeof (Storage) !== "undefined") {
           // 存储
           localStorage.sitename = "Qian Chia 工作室";
           // 查找
           document.getElementById("result").innerHTML = localStorage.sitename;
       } else {
           document.getElementById("result").innerHTML = "对不起，您的浏览器不支持 web 存储。";
       }
  </script>

• 效果

  

• 解析

  • 使用 key=”sitename” 和 value=”Qian Chia 工作室” 创建一个 localStorage 键/值对。
  • 检索键值为 “sitename” 的值然后将数据插入 id=”result” 的元素中。

• 在浏览器调试窗口中可以看到存储的数据

  

• 移除 localStorage 中的 “sitename” :

  localStorage.removeItem("sitename");

3、sessionStorage 对象

• sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

• 示例

  <p><button onclick="clickCounter()" type="button">点我！</button></p>
  <div id="result"></div>
  
  <script>
       function clickCounter() {
           if (typeof (Storage) !== "undefined") {
               if (sessionStorage.clickcount) {
                   sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
               } else {
                   sessionStorage.clickcount = 1;
               }
               document.getElementById("result").innerHTML = "在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
           } else {
               document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 web 存储";
           }
       }
  </script>

• 效果

  

• 解析

  • 点击该按钮查看计数器的增加。
  • 关闭浏览器选项卡（或窗口），重新打开此页面，计数器将重置。

• 在浏览器调试窗口中可以看到存储的数据

  

9、浏览器支持

元素
Web 存储	支持	8.0	支持	支持	支持

• 表格中的数字表示支持该元素的第一个浏览器版本号。