视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详解vue中localStorage的使用方法
2020-11-27 22:03:35 责编:小采
文档

什么是localStorage

对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage

1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载

2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在

所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是:

当我们首次访问设置Cookie的页面时,服务器会把设置的Cookie值通过响应头发送过来,告诉浏览器将cookie存储的本地相应文件夹中(注意:第一次访问时本地还没有存储Cookie,所以此时获取不到值);

当第二次访问(或在进行cookie设置后,过期前所有的访问)时,请求头信息你中都会把Cookie值携带。(百度到的,暂时还没理解透彻,先搬过来).

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不能被爬虫抓取到

注意点

  • localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
  • sessionStorage默认的有效期是浏览器的会话时间(也就是说标签页关闭后就消失了)。
  • localStorage作用域是协议、主机名、端口。(理论上,不人为的删除,一直存在设备中)
  • sessionStorage作用域是窗口、协议、主机名、端口。
  • 下载本文
    显示全文
    专题