js中本地存储的三种方式

1：cookie

Cookie用于储存不超过 4KB 的小型文本数据，拥有有效期、安全性、使用范围的属性;

用法：安装第三方插件 npm install js-cookie

按自己开发需求是全局引入还是局部引入，我这里是安全局引入，在main.js入口文件引入；

import Cookies from 'js-cookie'

Cookies.set('key', 'value')； //创建cookie，

Cookies.get('key');//读取cookie,

Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie,

Cookies.set('key', 'value', { path: url });//配置path，可指定页面设置cookie,

Cookies.remove('key');//删除普通的cookie,

Cookies.remove('key', 'value', { path: url });//配置path，可指定页面删除cookie,

2：localStorage

localStorage用于储存不超过5MB的文本数据，持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；

用法：

localStorage.setItem('key','value');  //设置localStorage

localStorage.setItem('key');  //读取localStorage

localStorage.removeItem('key');  //删除localStorage

localStorage.clear()    //删除所有localStorage

3：sessionStorage

sessionStorage用于储存不超过5MB的文本数据，页面（会话）关闭，sessionStorage 将会自动删除数据；

用法：sessionStorage用法和localStorage用法一致

三者的区别：

1：时效性--cookie可以设置过期时间；localStorage是永久性的储存，需用户自己手动清除；sessionStorage页面关闭自动清楚数据；

2：储存大小--cookie一般储存不超过4KB数据，localStorage和sessionStorage一般储存不超过5MB数据（看浏览器机制）；

3：数据与服务器之间的交互方式--cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存