LocalStorage 的使用方法

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 中的所有记录。它没有参数。
var keyName = window.localStorage.key(index);
浏览器支持情况

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 是同步的，这意味着任何的操作都是一个接一个执行的