JS中的Storage

介绍

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。

Web Storage 规范最新的版本是第 2 版，这一版规范主要有两个目标：

• 提供在 cookie 之外的存储会话数据的途径；
• 提供跨会话持久化存储大量数据的机制。

localStorage 是永久存储机制，sessionStorage 是跨会话的存储机制。

Storage 类型

Storage 类型用于保存名/值对数据，直至存储空间上限（由浏览器决定）。Storage 的实例与其他对象一样，但增加了以下方法。

对象一样，但增加了以下方法。

•  clear()：删除所有值；不在 Firefox 中实现。
• getItem(name)：取得给定 name 的值。
• key(index)：取得给定数值位置的名称。
• removeItem(name)：删除给定 name 的名/值对。
• setItem(name, value)：设置给定 name 的值。

sessionStorage 对象

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。

因为 sessionStorage 对象与服务器会话紧密相关，所以在运行本地文件时不能使用。存储在sessionStorage 对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。

使用 setItem()方法或直接给属性赋值给它添加数据

// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas"); 
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

对存在于 sessionStorage 上的数据，可以使用 getItem()或直接访问属性名来取得。

// 使用方法取得数据
let name = sessionStorage.getItem("name"); 
// 使用属性取得数据
let book = sessionStorage.book;

可以结合 sessionStorage 的 length 属性和 key()方法遍历所有的值：

for (let i = 0, len = sessionStorage.length; i < len; i++){ 
 let key = sessionStorage.key(i); 
 let value = sessionStorage.getItem(key); 
 alert(`${key}=`${value}`); 
}

也可以使用 for-in 循环迭代 sessionStorage 的值：

for (let key in sessionStorage){ 
 let value = sessionStorage.getItem(key); 
 alert(`${key}=${value}`); 
}

要从 sessionStorage 中删除数据，可以使用 delete 操作符直接删除对象属性，也可以使用removeItem()方法。

// 使用 delete 删除值
delete sessionStorage.name; 
// 使用方法删除值
sessionStorage.removeItem("book");

sessionStorage 对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储数据，可以使用 globalStorage 或 localStorage。

localStorage 对象

localStorage 对象取代了 globalStorage，作为在客户端持久存储数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

因 为 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样使用localStorage。比如下面这几个例子：

// 使用方法存储数据
localStorage.setItem("name", "Nicholas"); 
// 使用属性存储数据
localStorage.book = "Professional JavaScript"; 
// 使用方法取得数据
let name = localStorage.getItem("name"); 
// 使用属性取得数据
let book = localStorage.book;

两种存储方法的区别

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。