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 捕获窗口关闭事件
Jul 26 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
js实现一键复制功能
Mar 16 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP类的特性实例分析
2016/09/28 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python 实现向word(docx)中输出
2020/02/13 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
美国家居装饰店:Pier 1
2019/09/04 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
清洁工岗位职责
2014/01/29 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
安全生产标语
2014/06/06 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫