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 ...
随机推荐
- Intro to Python for Data Science Learning 5 - Packages
Packages From:https://campus.datacamp.com/courses/intro-to-python-for-data-science/chapter-3-functio ...
- Zookeeper学习记录(二):使用以及配置
zookeeper已经介绍了它的原理设计以及实现方式,我们接下来介绍zookeeper的使用方法以及简单配置. 下载 获取Zookeeper的发布包,从Apache下载映像中下载一个最新稳定版本. 单 ...
- centos7源码编译安装Subversion 1.9.5
svn是Subversion的简称,是一个开放源代码的版本控制系统.svn有两种运行方式:1.独立服务器(svn://xxx.xxx/xxx) 2.借助apache(http://svn.xxx.xx ...
- Linux基础命令---fold
fold 按照指定的宽度显示文件. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 fold [选项] fil ...
- linux服务器上nginx日志访问量统计命令
linux服务器上nginx日志访问量统计命令 日志文件所在地方:/var/log/nginx/access_iqueendress.com.log/var/log/nginx/access_m.iq ...
- php json_decode() 如果想要强制生成PHP关联数组,json_decode()需要加一个参数true
php json_decode()该函数用于将json文本转换为相应的PHP数据结构.下面是一个例子:$json = '{"foo": 12345}';$obj = json_de ...
- 【运维技术】Maven + Gogs + Nexus 实现版本管理 + 代码模块开发管理
Gogs:能够实现fork + 代码提交 + 代码框架 Nexus:进行jar包的版本管理,私服下载jar包共享jar包 Maven:在客户端进行模块管理和批量操作 1. 本地maven仓库配置配置s ...
- troubleshooting-执行导数shell脚本抛异常error=2, No such file or directory
Cannot run program "order_log.sh" (in directory "/data/yarn/nm/usercache/chenweidong/ ...
- 20145312《网络对抗》MSF基础
20145312<网络对抗>MSF基础 实验要求 1.掌握metasploit的基本应用方式 2.掌握常用的三种攻击方式的思路 实验问答 用自己的话解释什么是exploit.payload ...
- VS中sln和suo的区别
1.调试程序出现这个错误an error occurred while validating 解决方案:http://stackoverflow.com/questions/8648428/an-er ...