Web Storage
Web Storage是HTML5中本地存储的解决方案之一。
在H5之前，各种浏览器的本地存储方式花样百出，如IE User Data、Flash Cookie、Google Gears等，而cookies在存储上又有诸多的限制，因此，Web Storage的引入解决了众多浏览器的兼容问题。
Web Storage实际上由两部分组成：sessionStorage 和 localStorage，它们都属于window对象下的属性，具体区别如下：
| sessionStorage | localStorage | |
|---|---|---|
| 大小 | 一般为5MB | 一般为5MB |
| 生命周期 | 可永久，可主动删除 | 标签页或者浏览器关闭即删除 |
| 访问权限 | 特定于页面协议，当前域下的页面 | 特定于页面协议，存在于当前会话和域下的页面 |
| 数据格式 | 以字符串的形式存储的键值对 | 以字符串的形式存储的键值对 |
如何使用
sessionStorage和localStorage有相同的属性方法：
-
setItem(key, value)：添加或者更新键为key和值为value的数据； -
getItem(key)：获取键为key对应的value值； -
removeItem(key)：移除键为key数据； -
key(n)：返回存储对象中第 n 个键的名称； -
clear()：清除存储对象中所有的键；
setItem
sessionStorage.setItem('reus', 11);
localStorage.setItem('reus', 12);
在开发者工具分别观察到sessionStorage和localStorage的值：
getItem
const [session, local] = [
sessionStorage.getItem('reus'),
localStorage.getItem('reus'),
];
console.log(session, local);
key
sessionStorage.key(n);
localStorage.key(n);
以sessionStorage为例，在sessionStorage存下如下图数据：
即可用
key(n)获取sessionStorage下的第n个key值，如下图：
removeItem
sessionStorage.removeItem('reus');
localStorage.removeItem('reus');
在谷歌开发者工具可以看到sessionStorage和localStorage已经没有reus键值对了，图略。
clear
sessionStorage.clear();
localStorage.clear();
效果与removeItem(key)相同，不同的是removeItem(key)只是清除一项，而clear()清除所有的sessionStorage或localStorage存储
番外 -- 个人理解和思考
Web Storage的出现真的给前端带来了很多方便，现在几乎所有网站都会用到，而且兼容性也比较好，操作和使用难度也很低。但对于前端日益强大的趋势，仅仅5MB的存储空间可能不能满足一些需求，假如放一个数据表在前端，可能就无法满足了。而且，如果存储的键值对较多，对于获取数据可能就超级麻烦了，缺乏通过索引的方式查找数据，而且存储的数据都被转成字符串，所以，对于涉及数据操作层面来说，它又显得特别麻烦，所以新的存储方式IndexedDB就是为了适应此场景而生。
各位，互勉！！
