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);