Vue基于localStorage存储信息代码实例


Posted in Javascript onNovember 16, 2020

一 什么是localStorage

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

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

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

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

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

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

注意:sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON,所以这里就只列举localStorage

1 保存

//对象
const info = { name: 'hou', age: 24, id: '001' };
//字符串
const str="haha";
localStorage.setItem('hou', JSON.stringify(info));
localStorage.setItem('zheng', str);

2 获取

var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng'); 

3 删除

//删除某个
localStorage.removeItem('hou');
//删除所有
localStorage.clear();

4 监听

Storage 发生变化(增加、更新、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其他页面改变 Storage
window.addEventListener('storage', function (e) {
console.log('key', e.key); console.log('oldValue', e.oldValue);

console.log('newValue', e.newValue); console.log('url', e.url);
})

5浏览器中查看

Vue基于localStorage存储信息代码实例6

vue中实践

根据我的需求来的一个默认记住上次选择的,很简单

添加数据的时候,下次添加默认记住我上次的选择

所以,在添加或者提交的时候存储值即可,

localStorage.setItem('projectId',me.workhourData.projectId+","+me.workhourData.projectManager);在打开新建页面的时候获取一下就好了,只需要判断非空就行

//记住上次选中的审核人
      if(localStorage.length>0){
        var mydata = localStorage.getItem('projectId');
        if(mydata!=null){
          var arr3=mydata.split(",");
          if(arr3[0]==me.workhourData.projectId){
            me.workhourData.projectManager=arr3[1];
          }
        }
      }

7 注意点

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

知道了这些知识点后,你的问题就很好解决了。
localStorage是window上的。所以不需要写this.localStorage,vue中如果写this,是指vue实例。会报错

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

Javascript 相关文章推荐
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
JQuery live函数
Dec 24 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
微信小程序自定义底部弹出框动画
Nov 18 #Javascript
vue 封装面包屑组件教程
Nov 16 #Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 #Javascript
小程序实现密码输入框
Nov 16 #Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 #Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
You might like
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python实现批量压缩图片
2018/01/25 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python实现数值积分方式
2019/11/20 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
超市国庆节促销方案
2014/02/20 职场文书
英文求职信范文
2014/05/23 职场文书
公司2014年度工作总结
2014/12/10 职场文书