sessionStorage

sessionStorage 会话存储

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

    在JS中，可以通过window.sessionStorage 或者 sessionStorage 调用此对象。

 

sessionStorage 对象的特点

  1）同源策略限制

          若想在不同页面之间对同一个sessionStorage 进行操作，这些页面必须在同一协议、同一主机名和同一端口下。

  2）单标签页限制

          sessionStorage 操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage 数据。（同一标签页的iframe都共享该标签页的sessionStorage）

  3）仅在本地存储

          sessionStorage 数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据（若使用Chrome的恢复标签页功能，sessionStorage 的数据也会恢复）

  4）存储方式

          sessionStorage 存储方式采用 key - value 的方式。value 的值必须为字符串类型（传入非字符串，也会在存储时转换为字符串，true 会转换为“true”）

  5）存储上限

          不同浏览器存储上限不一样，但大多数浏览器把上限限制在 5MB 以下。

测试浏览器上限： http://dev-test.nemikor.com/web-storage/support-test/

 

浏览器最小版本支持

IE8, Chrome5

 

适合场景

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

 

sessionStorage 对象

属性

readonly int sessionStorage.length  - 返回一个整数，表示存储在sessionStorage 对象中的数据项（键值对）数量。

方法

string sessionStorage.key(int index)  - 返回当前sessionStorage 对象的第index 序号的key 名称，若没有返回null.

string sessionStorage.getItem(string key)  - 返回键名（key）对应的值（value）,若没有返回null.

void sessionStorage.setItem(string key, string value)  - 该方法接收一个键名（key）和值（value）作为参数，将键值对添加到存储中，如果键名存在，则更新其对应值。

void sessionStorage.removeItem(string key)  - 将指定的键名（key）从sessionStorage 对象中移除。

void sessionStorage.clear()  - 清除sessionStorage 对象所有的项。

 

示例

存储数据

setItem 方式

sessionStorage.setItem("testKey","一个新的值");

属性方式

sessionStorage["testKey"] = "一个值";

获取数据

getItem 方式

sessionStorage.getItem("testKey")

属性方式

sessionStorage["testKey"]

存储JSON 对象

sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

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