HTML5 Web Storage 存储

前言

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

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

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

1、Web 存储

  • 客户端存储数据的两个对象为:
标签 描述
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
  • 在使用 Web 存储前,应检查浏览器是否支持 localStorage 和 sessionStorage。

    1
    2
    3
    4
    5
    6
    7
    8
    <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 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <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” :

    1
    localStorage.removeItem("sitename");

3、sessionStorage 对象

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

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <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 支持 支持 支持
  • 表格中的数字表示支持该元素的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、Web 存储
  3. 3. 2、API
  4. 4. 3、作用域
  5. 5. 4、localStorage 对象
  6. 6. 3、sessionStorage 对象
  7. 7. 9、浏览器支持
隐藏目录