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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
微信小程序实现人脸识别
May 25 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 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
投票管理程序
2006/10/09 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP加密技术的简单实现
2016/09/04 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
javascript history对象详解
2017/02/09 Javascript
tab栏切换原理
2017/03/22 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
2014新生大学四年计划书
2014/09/21 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
自我推荐信格式模板
2015/03/24 职场文书
婚庆主持词大全
2015/06/30 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Python实现批量自动整理文件
2022/03/16 Python