Vue.js Client-Side Storage;( Web Storage/localStorage)
原文:https://cn.vuejs.org/v2/cookbook/client-side-storage.html
LocalStorage (api)
my code pen :https://codepen.io/chentianwei411/pen/oagZNM
最简单的存储机制。
LocalStorage使用key/value。不能存储复杂数据格式。
因此只使用小的存储。如用户设置,form data.
大的数据和复杂的存储需要用的如 .IndexedDB,
可以使用插件: vue-local-storage (353✨) 用的人很少
my code pen :https://codepen.io/chentianwei411/pen/wYBdOj
如果储存复杂数据, 如object, array。需要使用JSON格式存储数据,serialize and deserialize the values with JSON。
- 从localStorage.getItem("cats")的数据,需要JSON.parse()转化成javascript格式。
- 向localStorage.setItem("cats", parsedData), 需要使用JSON.stringify()转化成JSON格式
mounted: function() {
if (localStorage.getItem('cats')) {
try {
this.cats = JSON.parse(localStorage.getItem('cats'));
} catch(e) {
localStorage.removeItem("cats");
}
}
},
methods: {
addCat: function() {
if ( this.newCat == '' || this.newCat == null ) {
return
}
this.cats.push(this.newCat);
this.newCat = '';
this.saveCats();
},
saveCats: function() {
const parsed = JSON.stringify(this.cats);
localStorage.setItem('cats', parsed);
},
removeCat: function(n) {
this.cats.splice(n, 1);
this.saveCats();
console.log(this.cats)
}
}
Vue.js Client-Side Storage;( Web Storage/localStorage)的更多相关文章
- 用Vue.js和Webpack开发Web在线钢琴
缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...
- Django+Vue.js框架快速搭建web项目
一.vue环境搭建1.下载安装node.js.2.安装淘宝镜像cnpm,在命令窗口输入: npm install -g cnpm --registry=https://registry.npm.tao ...
- 数据存储的两种方式:Cookie 和Web Storage
数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...
- 数据存储的两种方式:Cookie 和Web Storage(转)
数据存储的两种方式:Cookie 和Web Storage 数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...
- HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...
- 网站开发进阶(三十)HTML5--本地存储Web Storage
HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...
- Vue.js 学习笔记之三:与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- Vue.js:轻量高效的前端组件化方案(转载)
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
随机推荐
- python requests 请求的封装
#encoding=utf-8import requestsimport jsonclass HttpClient(object): def __init__(self): pas ...
- python import win32clipboard 报错DLL load failed: %1 不是有效的 Win32 应用程序。
在python中引入win32clipboard时报错,DLL load failed: %1 不是有效的 Win32 应用程序 >>> import win32clipboardT ...
- excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法
excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法 office2007应该遇到“向程序发送命令时出现 问题”,设置为以管理员运行也不好用,重装office也不好用,下面介绍下 ...
- xmind使用教程思维导图
xmind使用教程思维导图 开始XMind旅程标记: 仅需2个快捷键 1 点击快捷键 创建同级主题 创建子主题 2 输入 选中主题后, 双击鼠标左键 或 单击空格键, 进入编辑状态. 3 其他内容 您 ...
- php 获取随机数的几个方式
php 获取随机数的几个方式 1.直接获取从min-max的数,例如1-20:$randnum = mt_rand(1, 20); 2.在一个数组里面随机选择一个(验证码的时候需要字母.数字混合的情况 ...
- Notepad++ 主题配色配置
以下方法来源网络,仅供参考: 方案1: 1.主题名称:Obsidian 2.字体字号:Courier New 10 (这里字体你可以随意选择,让自己满意即可) 3.设置方法:设置---语言格式设置-- ...
- Kali更新deb源
vim /etc/apt/sources.list #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib ...
- c++标准之于gcc/vc/boost等实现相当于jsr规范之于sunjdk/ibmjdk/tomcat/weblogic等实现
春节放假期间,一直在学习c++,越想越发现c++标准之于gcc/vc/boost等实现相当于jsr规范之于sunjdk/ibmjdk/tomcat/weblogic等实现
- Win10 Ubuntu 双系统 卸载 Ubuntu
Win10 Ubuntu 双系统 卸载 Ubuntu 其实卸载 Ubuntu 系统很简单,进 win10 系统之后,磁盘管理,格式化 Ubuntu 的磁盘就可以了. 但是最费劲的是什么呢? 就是格式化 ...
- [省选模拟]Rhyme
考的时候脑子各种短路,用个SAM瞎搞了半天没搞出来,最后中午火急火燎的打了个SPFA才混了点分. 其实这个可以把每个模式串长度为$K-1$的字符串看作一个状态,这个用字符串Hash实现,然后我们发现这 ...