sessionStorage 与 localStorage

sessionStorage、localStorage

localStorage与sessionStorage(点击查看MDN解释)都是web在存储用户数据时常用到的两个对象，两者的区别：
>sessionStorage：存储的数据只作用于当前会话（含重新加载或恢复页面），会话结束数据过期
>localStorage：存储的数据没有过期期限，数据存储在本地，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小（因浏览器而异）

语法

//将sessionStorage/localStorage赋值给Storage 
//var Storage = sessionStorage;
var Storage = localStorage;
// 保存数据到Storage
Storage.setItem(`myCat`, `Tom`);
// 从Storage获取数据
Storage.getItem(`myCat`);
// 从Storage删除保存的数据
Storage.removeItem(`myCat`);
// 从Storage删除所有保存的数据
Storage.clear();

>setItem(key,value)：增加一个数据项，以键值对形式保存
>getItem(key)：根据键名获取对应的值
>removeItem(key)：根据键名删除一个数据项
>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);
});

应该注意的是，无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议。

---