window API笔记

Window​.session​Storage

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

应该注意，存储在sessionStorage或localStorage中的数据特定于该页面的协议

个人理解：
sessionStorage是一个浏览器临时存储对象，浏览器关闭，内容就不存储，意外刷新的话，数据会缓存还原到相应位置

语法

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

实例

// 获取文本输入框
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);
});

监测浏览器是否支持本地临时缓存

if (!window.sessionStorage) {
        alert('您的浏览器不支持本地缓存,\n推荐使用最新版本chrome、firefox浏览器');
        return;
    }

localStorage

与sessionStorage不同在于localStorage:它是一个可被用于访问当前源（ origin ）的本地存储空间的 Storage 对象；用法一样