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