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
不会自动把数据发给服务器,仅在本地保存