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类库的顶层对象名用户体验分析
Oct 24 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
详解 javascript对象创建模式
Oct 30 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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
javascript实现数字时钟效果
2021/02/06 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
德国帽子专家:Hutshopping
2019/11/03 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
小学教师听课制度
2014/02/01 职场文书
环保建议书400字
2014/05/14 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript