浏览器本地存储可分为以下三种方式cookie，sessionStorage、localStorage
cookie、sessionStorage、localStorage都可做浏览器存储使用，三者的区别是什么呢？
什么是cookie
- 为什么要使用cookie？
Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。
你可能会有这样的经历，登陆一个网站的时候会提醒你要不要记住账户和密码，这样下次来你就不用再次输入账号密码了。这就是cookie的作用，当我们再次访问的时候，方便服务器直接根据我们的cookie来直接取上一次取过的东西(对于每一个cookie服务器会对这个cookie存储上一次我们拿过的数据，下一次对于同一个cookie的时候，就直接在这里取)
cookie的作用
Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下cookie），浏览器自动会将Cookie以key/value保存到某个目录下的文本文件内，下次请求同一网站时也会自动发送该Cookie给服务器，即添加在请求头部（前提是浏览器设置为启用cookie）。
Cookie就是一个小型文件（浏览器对cookie的内存大小是有限制的-------用来记录一些信息）
cookie的特点
-
Cookie具有保质期：即有永久的也含有临时的，每个浏览器都含有自己的cookie，每次请求的时候，都会根据domain来发送相应的cookie,可通过设置expires 、max-age来设定保存日期，不设置的话默认是临时存储，即关闭浏览器就消失。 -
满足同源策略：虽然网站
images.google.com与网站www.google.com同属于Google，但是域名不一样，二者同样不能互相操作彼此的Cookie。而且path也必须一样才能相互访问彼此的cookie，需要注意不同浏览器对path访问规定不一样，对于chrome，path必须为当前目录，设置为其他目录无效，只能当前页面只能访问当前目录及其以上的cookie -
Cookie内存大小受限制：大小一般是4k -
Cookie的安全性：Cookie在本地 可以被更改文件 敏感的数据不要放在cookie里 -
Cookies的使用：Cookie实际上主要是web服务器开发人员设置的，前端开发人员较少使用cookie，但是也会使用，比如设置登录也页面的账号信息。 我们打开浏览器控制台，对于chrome，切换到Application,在左边的Storage下面可以看到cookie项，点开就能看到当前有哪些cookie。
什么是localStorage
只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage（下面会介绍），但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。
应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。
另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
- 语法
myStorage = localStorage;
//下面的代码片段访问了当前域名下的本地对象，并通过 [`Storage.setItem()`]增加了一个数据项目。
localStorage.setItem('myCat', 'Tom');
// 该语法用于读取 `localStorage` 项，如下:
let cat = localStorage.getItem('myCat');
// 该语法用于移除 `localStorage` 项，如下:
localStorage.removeItem('myCat');
// 该语法用于移除所有的 `localStorage` 项，如下:
localStorage.clear();
什么是sessionStorage
sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
- 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
- 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文， 这点和 session cookies 的运行方式不同。
- 打开多个相同的URL的Tabs页面，会创建各自的
sessionStorage。 - 关闭对应浏览器窗口（Window）/ tab，会清除对应的
sessionStorage。
- 语法
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
三种方式的差异
cookie是存在客户端，session是存在服务器端的。因为cookie是存在客户端的，数据有可能被窃取，所以cookie一般不用来存储敏感信息。cookie可以在服务端响应时设置，也可以通过客户端发送http请求时设置请求头，携带cookie发送到服务端。cookie在客户端有大小限制，一般为4k。
各个之间对比
| 类型 | 有效时长 | 使用场景 | 大小 | http |
|---|---|---|---|---|
| cookie | 可设置过期时间，否则默认浏览器关闭后失效 | 登录信息保存 | 4k | 可携带，数据量过大影响性能 |
| sessionStorage | 窗口关闭或者浏览器关闭失效 | 临时存储 | 5M | 不参与服务端通信 |
| localStorage | 永久存储 | 永久存储 | 5M | 不参与服务端通信 |
注意
本地存储一般是明文存储，对于重要的信息不要直接存储在本地，如果非要存储的话，记得要对存储的信息进行加密。
加密方法：
a.可逆转加密（一般都是自己来设置自规则）
b.不可逆转加密：（一般都是基于MD5来进行加密，可能会把MD5加密后的数据二次加密）
