web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键 / 值对.
我们已经有了 cookie. 为什么还要其他存储对象呢?
与 cookie 不同, Web 存储对象不会随每个请求被发送到服务器. 因此, 我们可以保存更多数据. 大多数浏览器都允许保存至少 2MB 的数据 (或更多), 并且具有用于配置数据的设置.
还有一点和 cookie 不同, 服务器无法通过 HTTP header 操纵存储对象. 一切都是在 JavaScript 中完成的.
存储绑定到源 (域 / 协议 / 端口三者). 也就是说, 不同协议或子域对应不同的存储对象, 它们之间无法访问彼此数据.
相同点:
存储的内容为键值对, 键和值都必须是字符串, 我们可以使用 JSON 来存储对象
存储大小限制为 5MB+, 具体取决于浏览器.
它们不会过期.
数据绑定到源 (域 / 端口 / 协议).
不同点:
localStorage 会一直存在浏览器中, 即使浏览器关闭也不会消失, sessionStorage 页面刷新后数据仍然保留 (但标签页关闭后数据则不再保留)
localStorage 在同源的所有标签页和窗口之间共享数据, sessionStorage 在当前浏览器标签页中可见, 包括同源的 iframe
API:
setItem(key, value) -- 存储键 / 值对.
getItem(key) -- 按照键获取值.
removeItem(key) -- 删除键及其对应的值.
clear() -- 删除所有数据.
key(index) -- 获取该索引下的键名.
length -- 存储的内容的长度.
使用 Object.keys 来获取所有的键.
我们将键作为对象属性来访问, 在这种情况下, 不会触发 storage 事件.
Storage 事件:
在调用 setItem,removeItem,clear 方法后触发.
包含有关操作的所有数据 (
key/oldValue/newValue
), 文档 url 和存储对象 storageArea.
在所有可访问到存储对象的 Windows 对象上触发, 导致当前数据改变的 Windows 对象除外 (对于 sessionStorage 是在当前标签页下, 对于 localStorage 是在全局, 即所有同源的窗口).
localStorage 的应用
场景一: 将用户习惯的语言存入浏览器中, 下次进入时优先选取设置的语言
Windows.localStorage.setItem(LOCALE_KEY, lang)
场景二: 自动保存表单字段, 如果用户不小心关闭了页面, 然后重新打开, 他会发现之前未完成的输入仍然保留在那里.
- <!doctype html>
- <textarea style="width:200px; height: 60px;" id="area" placeholder="Write here"></textarea>
- <br>
- <button onclick="localStorage.removeItem('area');area.value=''">Clear</button>
- <script>
- area.value = localStorage.getItem('area');
- area.oninput = () => {
- localStorage.setItem('area', area.value)
- };
- </script>
参考链接:
https://zh.javascript.info/localstorage
来源: http://www.bubuko.com/infodetail-3815020.html