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 |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | ? | 8 | 11 | iOS 3.2 |
各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers。
Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.