localStorage是一种 web 端的存储机制，它使得由 JavaScript 编写的网站或者应用可以无限期的在浏览器中存储并访问数据。什么是无限期呢？就是说存储在浏览器中的数据是会一直存在的，及时浏览器被关闭了也不会消失。
LocalStorage 的使用方法
要在你的 web 应用中使用 LocalStorage，只需要掌握以下的五种方法就可以了：
setItem(): "增（改）" ，将数据以键值对的形式存到 LocalStorage 中
getItem(): "查" ，从 LocalStorage 获得对应键值的数据
removeItem(): "删" ，删除 LocalStorage 中给定键的数据条目
clear(): 清空 LocalStorage
key(): 传递一个数字 n，获取第 n 个键的数据
-
setItem()
就像这个方法的名一样，它可以在 LocalStorage 中存储数据。
它会接受两个参数，一个 key 和一个 value，通过 key 可以获取到对应的 value。
window.localStorage.setItem('name', 'Cola Frontend');
在这里，name 是我们的给定的 key，而 Cola Frontend 就是与这个这个 key 相对应的 value。记住：LocalStorage 只能存储字符串。
如果你想要将一个对象或者一个数组存储在 LocalStorage 中，你需要先将它们转换成字符串的形式。如何将其转为字符串呢？这里不是简单地 toString() 方法，而是要用到 JSON.stringify() 这个方法：
const developer = {
name: 'Cola Frontend',
skills: ['React', 'Redux', 'RxJS', 'TypeScript'],
}
window.localStorage.setItem('developer', JSON.stringify(developer));
-
getItem()
使用 getItem() 方法可以访问到存在浏览器 localStorage 中的数据对象，它以 key 作为参数，并且返回与 key 相对应的 value。上面提到过，这个 value 只是字符串，并不是 JavaScript 对象或者数组。
如何拿到我们刚才存储的值呢？
window.localStorage.getItem('developer');
返回的数据是这样的：
"{"name":"Cola Frontend","skills":["React","Redux","RxJS","TypeScript"]}"
这显然不是我们想要的结果，要想正常的使用这个值，你需要先将它转换回对象类型。我们可以使用 JSON.parse() 来将一个 JSON 字符串转换成 JavaScript 对象：
JSON.parse(window.localStorage.getItem('developer'));
-
removeItem()
removeItem() 方法会根据传入的 key 删除 localStorage 中对应的数据。如果不存在这个 key 的话，那么它什么都不会做。
window.localStorage.removeItem('developer');
-
clear()
clear() 方法会删除 domain 内整个 localStorage 中的所有记录。它没有参数。
window.localStorage.clear();
-
key()
key() 这个方法看起来没什么太大的必要，它的设计初衷是让你能很方便的通过 keys 遍历整个 localStorage，或者通过索引获取到 key 的名字。
var keyName = window.localStorage.key(index);
使用限制(注意事项)
通过上面的介绍可以知道， localStorage 用起来是很方便的，但是这种方便带来的弊端就是很容易错误地使用它。遵循以下的几点建议，不要在这几种情况下使用 localStorage：
- 不要在 localStorage 中存储敏感的用户信息
- 它不是服务器端数据库的替代品，因为信息只保存在浏览器中
- localStorage 的大小不能超过 5MB，所有浏览器都是这样
- localStorage 非常没有安全性，它没有对数据的保护机制，可以被任意的 web 端代码获取
- localStorage 是同步的，这意味着任何的操作都是一个接一个执行的
