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 中保存的数据都仅限于该页面的协议。