sessionStorage

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookie 的运行方式不同。

语法

// 保存数据到sessionStorage

sessionStorage.setItem('key', 'value');

 

// 从sessionStorage获取数据

var data = sessionStorage.getItem('key');

返回值

一个 Storage 对象。

示例

下面的代码访问当前域名的 session Storage 对象，并使用 Storage.setItem() 访问往里面添加一个数据条目。

sessionStorage.setItem('myCat', 'Tom');

下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。

// 获取文本输入框

var field = document.getElementById("field");

 

// 检测是否存在 autosave 键值

// (这个会在页面偶然被刷新的情况下存在)

if (sessionStorage.getItem("autosave")) {

  // 恢复文本输入框的内容

  field.value = sessionStorage.getItem("autosave");

}

 

// 监听文本输入框的 change 事件

field.addEventListener("change", function() {

  // 保存结果到 sessionStorage 对象中

  sessionStorage.setItem("autosave", field.value);

});

备注：完整的使用示例可以查看使用 Web Storage API一文。

规范

Specification	Status	Comment
Web Storage (Second edition) sessionStorage	Recommendation

浏览器兼容性

• Desktop

 

• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4