HTML5 webstorage

前提：用cookie存储永久数据存在以下几个问题：
1.大小：cookie的大小被限制在4KB。
2.带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。
3.复杂性：要正确的操纵cookie是很困难的。

针对这些问题，在HTML5中，重新提供了一种在客户端本地保存数据的功能，它就是Web Storage。这是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，减轻了服务器端的负担，加快了访问数据的速度。
WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

localStorage 与 sessionStorage 的不同：

作用范围：

localStorage：只要在同一源下（协议+主机名+端口）就能读取/修改到同一份localStorage数据。
sessionStorage：比localStorage更严苛，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

生存周期：

localStorage:存在本地，永久保存。
sessionStorage：只要关闭浏览器（也包括浏览器的标签页），就会被清空。

应用场景：

localStorage:常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
sessionStorage：敏感账号一次性登录；

相同：

以下都以localStorage举例。

数据结构：

为标准的键值对（Key-Value）数据类型，简单易扩展，只能存储字符串类型。
对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

JSON.stringify()将其json对象转为字符串。
JSON.parse()将字符串转为json对象格式。

对于图片可以转换成DataUrl（base64）。

存储大小：

一般都是：5MB

存储位置：

都保存在客户端，不与服务器进行交互通信。

使用方法：

写入：

//写入a字段
localStorage["a"]='1';
//写入b字段
localStorage.b='2';
//写入c字段
localStorage.setItem("c",'3'); //推荐

获取：getItem (key)

localStorage.getItem(key)

删除：
将localStorage的所有内容清除：

localStorage.clear()

将localStorage中的某个键值对删除：

localStorage.removeItem(key);

localStorage的键获取:
key()方法，向其中出入索引即可获取对应的键

localStorage.setItem("a","red");
localStorage.setItem("b","black");
for (let i =0;i

 
 问题： 
 在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。 
 WebStorage的优点： 
 （1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
参考文章：https://www.runoob.com/w3cnot...
参考文章：https://www.cnblogs.com/pengc...