JavaScript 学习笔记 - LocalStorage
前言
本文主要介绍本地存储的基本使用，以及它和 Cookie、SessionStorage 的区别。
简单回顾 Cookie
在 HTML5 之前，本地存储数据一般是通过 Cookie 来完成的。我们可以把 Cookie 理解为一个长度有限的字符串，服务端和客户端都能读写这个字符串，并且每次请求时，都会把 Cookie 发送到服务端。
通常，我们可以利用这个字符串来保存用户名、密码等数据，来实现记住密码、自动登录等功能。
但是，Cookie 本来就不是用来存储数据的，所以会有一些局限性：
- 存储空间有限，最多也就是几十 K 的大小。
- 每次请求都发送到服务器，浪费宽带。
- 使用起来比较麻烦的，需要自己封装操作函数。
本地存储的简单使用
本地存储（LocalStorage）是一种基于键值对的持久化存储方案。“持久化存储”就意味着，如果不手动清除，数据就永远不会过期。
基于键值对的存储方案，使用起来是很方便的。我们可以通过 localStorage.setItem(key, value) 来保存数据。
比如保存一个用户名：
javascript-demo/localstorage.html：
localStorage.setItem('name', 'hello')
然后就可以通过 localStorage.getItem(key) 的方式来获取数据：
localStorage.getItem('name') // hello
LocalStorage 还支持直接对 localStorage 对象的属性进行操作来存取数据，效果和 setItem、getItem 是一样的。
localStorage.hi = 'Hi'
console.log(localStorage.hi) // Hi
以上代码等同于：
localStorage.setItem('hi', 'Hi')
console.log(localStorage.getItem('hi')) // Hi
存储对象
本地存储只支持字符串存储，存储任何类型的数据，都会被转换成字符串。
javascript-demo/localstorage-number.html：
localStorage.setItem('age', 1024)
console.log(typeof localStorage.getItem('age')) // string
读取完数据后，还要把数据转成 Number 类型，很麻烦。有时候，我们还需要存储复杂的数据结构。不可能像下面那样将对象的属性一个个存储，再一个个读取。
javascript-demo/localstorage-object.html：
// 保存对象
let obj = {
name: 'hello',
age: 1024
}
localStorage.setItem('name', obj.name)
localStorage.setItem('age', obj.age)
// 读取对象
let newObj = {
name: localStorage.getItem('name'),
age: parseInt(localStorage.getItem('age'))
}
console.log(newObj)
这时，我们需要利用 JSON API，来简单封装本地存储。原理是保存数据前，通过 JSON.stringify 把数据转换成 JSON 字符串再保存；读取数据后，通过 JSON.parse 把 JSON 字符串转换成原来的值。
// 简单封装
const storage = {
set: function (key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
get: function (key) {
return JSON.parse(localStorage.getItem(key))
}
}
// 保存对象
let obj = {
name: 'hello',
age: 1024
}
storage.set('obj', obj)
// 读取对象
console.log(storage.get('obj'))
这很方便，存取数字类型时也不需要转换了。
storage.set('age', 1024)
console.log(typeof storage.get('age')) // number
API 介绍
一般来说，setItem 和 getItem 就足够用了。这里大致介绍一下常用的属性和方法，有兴趣的了解一下。
localStorage.length：获得存储的键值对的的个数。localStorage.key(n)：获得存储的第 n 个元素对的键值（也叫做键名，不要和值搞混了）（下标从0开始）。localStorage.getItem(key)：获取 key 对应的 value。localStorage.key：获取 key 对应的 value，相当于getItem。也可以直接赋值，则相当于setItem。localStorage.setItem(key, value)：添加键值对到存储。localStorage.removeItem(key)：移除键值为 key 的键值对。localStorage.clear()：清除所有数据。
LocalStorage VS Cookie
在数据存储方面，Cookie 的不足，也就是本地存储的优势，相对于 Cookie，本地存储的优势在于：
- 较大的存储空间。虽然 W3C 对存储空间没有限制，但浏览器有。不同的浏览器的限制大小可能不同。IE8 上是 10MB，Chrome 是 5MB（数据源于网络，本人未去证实）。在未来可能会更大。
- 不用每次请求都发送到服务器，提高请求速度。
- 足够好用的 API 支持，操作简单。
尽管本地存储功能强大，但它和 Cookie 的分工不同，还无法用来取代 Cookie。
一般来说，Cookie 用来与服务器进行交互，而不是用来存储。而 LocalStorage 仅用来存储。
同源限制
LocalStorage 同样受限于同源策略。不同源之间的数据无法共享。关于同源策略，不懂的可以看我的这篇文章：前端学习笔记 - 跨域
Session Storage
SessionStorage 和 LocalStorage 功能类似，区别仅仅是数据保存时间的不同而已。LocalStorage 是持久存储的，如果不手动清除，数据就永远不会失效。而 SessionStorage 的数据存储在窗口对象中，一旦窗口对象没了（用户关闭浏览器或标签页），数据就会丢失。
我们可以简单地测试一下：
javascript-demo/sessionstorage.html：
console.log(sessionStorage.getItem('name'))
sessionStorage.setItem('name', 'hello')
console.log(sessionStorage.getItem('name'))
第一次运行时，控制台输出：
null
hello
刷新一下浏览器，控制台输出：
hello
hello
然后打开一个新标签页（不要关闭原来的标签页），在新标签页中打开示例，可以看到控制台输出：
null
hello
可见，对于不同的标签页，SessionStorage 是无法共享数据的。一旦关闭了标签页或浏览器，存储的数据就再也找不回了。
应用
- 比如文章编辑器的实时保存（以及断网时的保存策略）。
- 一些不重要的用户设置。比如某些阅读类的网站，用户可以设置文章的字体大小、配色等。这些数据有时没必要保存在数据库。
- 比如。。。你仔细想想，还是有很多的。
需要注意的是，不要太依赖于本地存储。本地存储虽然是永久的，但随时可能被用户或浏览器清理掉。此外，不同浏览器间也是无法共享数据的。
总结
无聊的补充
我们可以这样获取已经占用的存储空间大小：
var total = unescape(encodeURIComponent(JSON.stringify(localStorage))).length;
console.log(total / 1024 + 'K')
5M 左右的空间，也是会用满的：
for (let i = 0; i < 1024 * 1024; i++) {
localStorage.setItem('test' + i, 'hello')
}
控制台输出：
Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'test356613' exceeded the quota.
意思是超出配额了。
我们也可以来测试你的浏览器对本地存储的最大允许容量。
for (let i = 0; i < 1024 * 1024; i++) {
var total = unescape(encodeURIComponent(JSON.stringify(localStorage))).length;
console.log(total / 1024 / 1024 + 'M')
localStorage.setItem('test' + i, '0')
}
我试了两个浏览器，360浏览器崩溃了，谷歌浏览器显示 7M 多。
