标签：存储机制 sessionstorage localstorage
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对象作为Web Storage API的接口，Storage提供了访问特定域名下的会话存储或本地存储的功能。例如，可以添加、修改或删除存储的数据项。
如果想操作一个域名的会话存储，可以使用Window.sessionStorage；如果想要操作一个域名的本地存储，可以使用Window.localStorage。
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
前面的示例也演示过了，接下来拿localStorage来做示例：
localStorage.setItem(‘key‘, ‘value‘); // 设置一个localStorage，名称叫`key`localStorage.getItem(‘key‘); // 获取存储的localStorage，获取的`key`对应的值`value`localStorage.removeItem(‘key‘); // 移除存储的localStorage，删除的名称`key`localStorage.clear(); // 删除所有的localStorage |
为了方便使用，可以对其进行封装。
function setLocalStorage(key, value) { return localStorage.setItem(key, value);} |
function getLocalStorage(key) { return localStorage.getItem(key);} |
function removeLocalStorage(key) { return localStorage.removeItem(key);} |
注：sessionStorage使用方法和localStorage类似。
Web存储机制—sessionStorage,localStorage使用方法
标签：存储机制 sessionstorage localstorage
原文地址：http://13031109.blog.51cto.com/13021109/1943018
