Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用相关的知识,希望对你有一定的参考价值。
参考技术AlocalStorage和sessionStorage都是通过键值对的方式进行存储,用于不同页面之间传值 (注意:它们都只接受存储字符串类型的数据,若遇到json格式的数据需要使用JSON.stringify()将数据转化为字符串类型) ,区别在于:
1、sessionStorage:用于短期存储,当浏览器关闭之后sessionStorage中存储的数据就会被清除,浏览器不关闭仅关闭网页数据不删除。
2、localStorage:用于长期存储,当浏览器关闭之后localStorage存储的内容不会被清除,数据一直存储在本地。
vuex常被用于两个组件进行数据交互时,如一个组件修改了某一个数据,需要另一个组件也同步这个更改,而localStorage和sessionStorage无法同步更改,这时就需要使用vuex来达到这个目的。
vue中 localStorage的使用方法(详解)
vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
(1).储存数据
localStorage.setItem(‘accessToken‘, ‘Bearer ‘ + response.data.result.accessToken)
(2).取出数据
localStorage.getItem(‘accessToken‘)
(3).删除储存数据
localStorage.removeItem(‘accessToken‘)
(4).更改数据
localStorage.setItem(‘accessToken‘, ‘更改后‘ + response.data.result.accessToken)
使用时有两点需要注意过的地方:
. localStorage在浏览器的隐私模式下面是不可读取的。
. localStorage本质上是对字符串的读取,有json格式时需要JSON.stringify()转化为字符串。
. localStorage不能被爬虫抓取到
以上是关于Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用的主要内容,如果未能解决你的问题,请参考以下文章