Web存储机制，在这里主要聊有关于Web Storage API提供的存储机制，通过该机制，浏览器可以安全地存储键值对，比使用cookie更加直观。接下来简单的了解如何使用这方面的技术。

基本概念

Web Storage 包含两种机制：

• sessionStorage为每一个给定的源维持一个独立的存储区域，该区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）
• localStorage同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在

这两种机制是通过Window.sessionStorage和Window.localStorage属性使用。更确切的说，在支持的浏览器中Window对象实现了WindowLocalStorage和WindowSessionStorage对象并挂在其localStorage和sessionStorage属性下。调用其中任一对象会创建Storage对象，通过Storage对象，可以设置、获取和移除数据项。对于每个源sessionStorage和localStorage使用不同的Storage对象。

例如，在文档中调用localStorage将会返回一个Storage对象，调用sessionStorage返回一个不同的Storage对象。可以使用相同的方式操作这些对象，但是操作是独立的。

在了解如何使用localStorage和sessionStorage之前，先来一下Storage对象。

Storage对象

Storage对象作为Web Storage API的接口，Storage提供了访问特定域名下的会话存储或本地存储的功能。例如，可以添加、修改或删除存储的数据项。

如果想操作一个域名的会话存储，可以使用Window.sessionStorage；如果想要操作一个域名的本地存储，可以使用Window.localStorage。

Storage对象的属性和方法

Storage对象提供自己的属性和方法：

• Storage.length：返回一个整数，表示存储在Storage对象中的数据项数量。这个是Storage对象的一个属性，而且是一个只读属性。
• Storage.key()：该方法接受一个数值n作为参数，并返回存储中的第n个键名
• Storage.getItem()：该方法接受一个键名作为参数，返回键名对应的值
• Storage.setItem()：该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值
• Storage.removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除
• Storage.clear()：调用该方法会清空存储中的所有键名

简单的示例

写一个简单的示例，页面就三个按钮：Set、Get和Remove。按钮点击时，分别绑定三个函数：setStorage()、getStorage()和removeStorage()：

• setStorage()：做了localStorage和sessionStorage存储，同时存的键名为name，键值为W3cplus.com
• getStorage()：取得存储的name，并打印出来
• removeStorage()：移除setStorage()函数中存储的name