详解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 相关文章推荐
javascript学习之闭包分析
Dec 02 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Vue 滚动行为的具体使用方法
Sep 13 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
微信小程序功能之全屏滚动效果的实现代码
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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
深入分析PHP设计模式
2020/06/15 PHP
用javascript实现自定义标签
2007/05/08 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
internal修饰符起什么作用
2013/12/16 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
企业文明单位申报材料
2014/05/16 职场文书
法定代表人授权委托书
2014/09/19 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年督导工作总结
2014/11/19 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
python 离散点图画法的实现
2022/04/01 Python