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

  • clear()：删除所有值，不在Firefox中实现
  • getItem(name)；取得给定name的值
  • key(index)：取得给定数值的 位置名称
  • removeItem()；删除给定name的名/值对
  • setItem(name,value)：设置给定的name值（创建一个名字来代表要存储的数据）

getItem()、removeItem()和 setItem()方法可以直接或间接通过 Storage 对象调用。因为每 个数据项都作为属性存储在该对象上，所以可以使用点或方括号操作符访问这些属性，通过同样的操作 来设置值，也可以使用 delete 操作符删除属性。即便如此，通常还是建议使用方法而非属性来执行这 些操作，以免意外重写某个已存在的对象成员。

通过 length 属性可以确定 Storage 对象中保存了多少名/值对。我们无法确定对象中所有数据占用 的空间大小，尽管 IE8 提供了 remainingSpace 属性，用于确定还有多少存储空间（以字节计）可用。
通过 length 属性可以确定 Storage 对象中保存了多少名/值对。我们无法确定对象中所有数据占用
的空间大小，尽管 IE8 提供了 remainingSpace 属性，用于确定还有多少存储空间（以字节计）可用。

注意 Storage 类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。
注意，这种转换不能在获取数据时撤销。

1. sessionStorage 对象

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时
会消失的会话 cookie 类似。存储在 sessionStorage 中的数据不受页面刷新影响，可以在浏览器崩溃
并重启后恢复。

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

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

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

使用 getItem()或直接访问属性名来取得。

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

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

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

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

2. localStorage 对象

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

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

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