详解vue中localStorage的使用方法


Posted in Javascript onNovember 22, 2018

什么是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作用域是窗口、协议、主机名、端口。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现select选择框效果及美化
Aug 19 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
微信小程序功能之全屏滚动效果的实现代码
Nov 22 #Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 #Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 #Javascript
从源码里了解vue中的nextTick的使用
Nov 22 #Javascript
Vue动态加载异步组件的方法
Nov 21 #Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 #Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 #Javascript
You might like
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
js 判断 enter 事件
2009/02/12 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
语文课外活动总结
2014/08/27 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
开学典礼致辞
2015/07/29 职场文书
初三毕业感言
2015/07/31 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
python pygame 开发五子棋双人对弈
2022/05/02 Python