图片来源 unsplash
人们尤其偏爱“二次选择”这个套路。“给你一次重新选择的机会，你会如何？”“如果……也许会更好？”大部分人都会这么想。但实际上，并不如此，放弃理想选择现实，你会抱憾终生，为了理想放弃现实，你会发现理想跟想的不一样；你以为一切痛苦的根源是没娶到初恋，娶了初恋你就会嫌弃她变了；结婚的人羡慕单身的自由，单身的羡慕结婚的陪伴。殊途同归。
LocalStorage 是一种 web 端的存储机制，它使得由 JavaScript 编写的网站或者应用可以无限期的在浏览器中存储并访问数据。什么是无限期呢？就是说存储在浏览器中的数据是会一直存在的，及时浏览器被关闭了也不会消失。
LocalStorage 的使用方法
要在你的 web 应用中使用 LocalStorage，只需要掌握以下的五种方法就可以了：
setItem(): "增（改）"，将数据以键值对的形式存到 LocalStorage 中
getItem(): "查"，从 LocalStorage 获得对应键值的数据
removeItem(): "删"，删除 LocalStorage 中给定键的数据条目
clear(): 清空 LocalStorage
key(): 传递一个数字 n，获取第 n 个键的数据
PS: 可以发现，这里对于数据的处理也无非是 “增删改查” 四个基本操作，还有一个是清空数据库的操作，最后一个是根据索引查找数据条目的操作。
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 作为一种 web 端的存储机制，被写入了 HTML5 的设计规范中。所有的主流浏览器对它都是支持的，包括了 IE8。为了确保浏览器支持 localStorage，你可以使用下面这段代码进行检验：
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}
使用限制
通过上面的介绍可以知道， localStorage 用起来是很方便的，但是这种方便带来的弊端就是很容易错误地使用它。遵循以下的几点建议，不要在这几种情况下使用 localStorage：
- 不要在 localStorage 中存储敏感的用户信息
- 它不是服务器端数据库的替代品，因为信息只保存在浏览器中
- localStorage 的大小不能超过 5MB，所有浏览器都是这样
- localStorage 非常没有安全性，它没有对数据的保护机制，可以被任意的 web 端代码获取
- localStorage 是同步的，这意味着任何的操作都是一个接一个执行的
小结
学会使用 localStorage 是很简单的，但是在什么情况下决定用，决定怎么用，则是另一个更加深层次的话题，它需要的是更多方面的考虑：对性能的影响、对安全性的影响、对设计规范的影响等等。
网友评论