localStorage、sessionStorage

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage ——没有时间限制的数据存储
• sessionStorage ——针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。 对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。 HTML5 使用 JavaScript 来存储和访问数据。

:::info localStorage 是 HTML5 本地存储的 API，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异，如使用方法、最大存储空间等。 :::

基本使用方法

localStorage 和 sessionStorage 的接口类似，用法也类似，下面以 localStorage 为例。

• 设置数据

localStorage.setItem("username", "jack");
//设置一条本地存储，key值为“username”，value值为“jack”

localStorage.setItem("msg", ["i", "love", "you", "very", "much"]);
//value值设置时是一个数组，但是存进去的是是一个用逗号分割成的字符串

• 获取数据

localStorage.getItem("username"); //获取key值为username的value值（jack）
localStorage.getItem("msg"); //取出的是字符串  "i,love,you,very,much"

• 删除数据

localStorage.removeItem("username"); //删除key值为username的这一条存储

• 清空数据

localStorage.clear();

• 获取本地存储量（条数）

localStorage.length;

• 遍历 key 键值

localStorage.key(i); // 获取第 i 条存储的 key 值

for (var i = 0; i < localStorage.length; i++) {
  console.log(
    "第" +
      (i + 1) +
      "条存储的key值为：" +
      localStorage.key(i) +
      ",对应的value值为：" +
      localStorage.getItem(localStorage.key(i))
  );
}

除了这些操作用法之外，还可以通过点语法和中括号语法对数据进行存储和获取

比如：localStorage.name = "jack" , localStorage["name"]

差别

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。