vue 界面刷新数据被清除 localStorage的使用详解


Posted in Javascript onSeptember 16, 2018

localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中

window.localStorage.setItem('key', value); //储存文件

window.localStorage.getItem('key'); //读取文件

window.localStorage.removeItem('key'); //清除文件

vue中使用方法:

1、新建一个store.js文件

localStorage只能存储字符串,非字符串的数据在存储之前会被转换成字符串。在存储一些复杂数据类型时可能有些麻烦,下面方法是先使用JSON.stringfy()方法将其转换为字符串后存储,读取时使用JSON.parse()方法进行还原。

const IDLIST_KEY = 'idlist'; //定义常量保存键值

export default {

 saveIDlist(data){

 window.localStorage.setItem(IDLIST_KEY,JSON.stringify(data)); 

 },

 fetchIDlist(){

 return JSON.parse(window.localStorage.getItem(IDLIST_KEY)|| '[]');

 }

}

2、引入js文件:

vue 界面刷新数据被清除 localStorage的使用详解

3、使用:

store.saveIDlist(selectIDlist); //保存

selectIDlist = store.fetchIDlist(); //读取

以上这篇vue 界面刷新数据被清除 localStorage的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现隔行背景色变色
Nov 24 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
react中使用swiper的具体方法
May 15 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
vuex提交state&&实时监听state数据的改变方法
Sep 16 #Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 #Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 #Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 #Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 #Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 #Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php格式化时间戳
2016/12/17 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Django 拆分model和view的实现方法
2019/08/16 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
科室工作的个人自我评价
2013/10/30 职场文书
年终考核评语
2014/01/19 职场文书
实习老师离校感言
2014/02/03 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
初中政治教学反思
2016/02/23 职场文书