Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。
我们已经有了 cookie。为什么还要其他存储对象呢？
- 与 cookie 不同，Web 存储对象不会随每个请求被发送到服务器。因此，我们可以保存更多数据。大多数浏览器都允许保存至少 2MB 的数据（或更多），并且具有用于配置数据的设置。
- 还有一点和 cookie 不同，服务器无法通过 HTTP header 操纵存储对象。一切都是在 JavaScript 中完成的。
- 存储绑定到源（域/协议/端口三者）。也就是说，不同协议或子域对应不同的存储对象，它们之间无法访问彼此数据。
相同点：
- 存储的内容为键值对，键和值都必须是字符串，我们可以使用JSON来存储对象
- 存储大小限制为 5MB+，具体取决于浏览器。
- 它们不会过期。
- 数据绑定到源（域/端口/协议）。
不同点：
- 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。 - 在所有可访问到存储对象的
window对象上触发，导致当前数据改变的window对象除外（对于sessionStorage是在当前标签页下，对于localStorage是在全局，即所有同源的窗口）。
localStorage的应用
场景一：将用户习惯的语言存入浏览器中，下次进入时优先选取设置的语言
window.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