Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。
我们已经有了 cookie。为什么还要其他存储对象呢？
相同点：
不同点：
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
localStorage与sessionStorage的区别
原文：https://www.cnblogs.com/artian/p/15184101.html