HTML5 sessionStorage会话存储

1.说明

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

  在JavaScript语言中,可以用window.sessionStorage或sessionStorage调用此对象。

2.特点

  1)同源策略限制。若想在不同页面之间对同一个sessionStorage对象进行操作,这些页面必须在同一个协议、同一个主机名和同一个端口下。

  2)单标签页限制。sessionStorage操作限制在单个标签页中,在此标签页中进行同源页面访问都可以共享sessionStorage数据。

  3)只在本地存储。sessionStorage的数据不会跟随HTTP请求一起发送的服务器,只会在本地生效,并在关闭标签页后删除数据。(若使用Chrome恢复标签页的功能,

   sessionStorage的数据也会恢复)

  4)存储方式。sessionStorage的存储方式使用key、value的方式。value的值必须是字符串的形式(非字符串,也会在存储时转换为字符串。true值会转换为"true")

  5)存储上限限制。不同的浏览器存储上限都有不同,大部分浏览器会控制在5Mb以内。

3.适合场景

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

4.成员

4.1属性

 readonly int sessionStorage.length():返回一个整数,表示存储在sessionStorage对象中的数据项(键值对)数量。

4.2方法

  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存储到sessionStorage中;如果键名存在,则更新其对应的值。

  void sessionStorage.removeItem(String key):将指定的键名(key)从sessionStorage中移除。

  void sessionStorage.clear():清楚sessionStorage对象所有的项。

5.示例

5.1)存储数据

  5.1.1)采用sessionStorage.setItem()方法存储

    sessionStorage.setItem("testKey","这是一个测试的value值");

  5.1.2)通过属性方式存储

    sessionStorage["testKey"]="这是一个测试的value值";

          或 sessionStorage.testKey="这是一个测试的value值";

5.2)读取数据

  5.2.1)通过getItem()方法读取数据

    sessionStorage.getItem("testKey");

  5.2.2)通过属性方式取值

    sessionStorage["testKey"];

          或sessionStorage.testKey;

5.3)存储JSON对象

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

  var userEntity={

             name:"baobao";

             age:3

       };

     //存储值:将对象转换为JSON字符串

    sessionStorage.setItem("user",JSON.stringify(userEntity));

 //取值时:把获取的文本再转换为JSON对象

   var userJsonStr=sessionStorage.getItem("user");

 userEntity=JSON.parse(userJsonStr);

   

原文地址:https://www.cnblogs.com/fengshine/p/10494628.html