HTML5 sessionStorage 会话存储

HTML5 sessionStorage 会话存储

1. 介绍

1.1 说明

sessionStorage 是 HTML5新增的一个会话存储对象，用于保存 同一窗口（或标签页） 的数据，在关闭窗口或标签页之后将会删除这些数据。

1.2 特点

1. 同源策略限制。若想在不同页面对同一个 sessionStorage 进行操作，这些页面必须同一个协议、同一个主机名和同一个端口下。（IE8 和 9存储数据仅基于同一主机名，忽略协议（ http和 https）和端口号的要求）
2. 单标签页限制。sessionStorage 操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享 sessionStorage 数据
3. 只在本地存储。sessionStorage 的数据不会随着 HTTP 请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。（若使用 Chrome 的恢复标签页功能，sessionStorage 的数据也会恢复）
4. 存储方式，sessionStorage 存储方式采用 key 和 value 的方式存储。value 的值必须为字符串类型（传入非字符串，也会在存储时转换为字符串，如 true 转换为"true"）
5. 存储上限：不同的浏览器存储上限不一样，但大多数浏览器都会把上限限制在 5MB 一下。
   可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。

1.3 浏览器最小版本支持

支持sessionStorage的浏览器最小版本：IE8、Chrome 5。

1.4 适合场景

sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。

2. 成员

2.1 属性

• sessionStorage.length：返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。
• sessionStorage.key(int index)：返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
• sessionStorage.getItem(string key)：返回键名(key)对应的值(value)。若没有返回null。
• sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
• sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。
• sessionStorage.clear() ：清除sessionStorage 对象所有的项。

3.示例

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom