原文: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)的更多相关文章

  1. 用Vue.js和Webpack开发Web在线钢琴

    缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...

  2. Django+Vue.js框架快速搭建web项目

    一.vue环境搭建1.下载安装node.js.2.安装淘宝镜像cnpm,在命令窗口输入: npm install -g cnpm --registry=https://registry.npm.tao ...

  3. 数据存储的两种方式:Cookie 和Web Storage

    数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...

  4. 数据存储的两种方式:Cookie 和Web Storage(转)

    数据存储的两种方式:Cookie 和Web Storage   数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...

  5. HTML5 Web Storage 特性

    原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...

  6. 网站开发进阶(三十)HTML5--本地存储Web Storage

    HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...

  7. Vue.js 学习笔记之三:与服务器的数据交互

    显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...

  8. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  9. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

随机推荐

  1. python requests 请求的封装

    #encoding=utf-8import requestsimport jsonclass HttpClient(object):    def __init__(self):        pas ...

  2. python import win32clipboard 报错DLL load failed: %1 不是有效的 Win32 应用程序。

    在python中引入win32clipboard时报错,DLL load failed: %1 不是有效的 Win32 应用程序 >>> import win32clipboardT ...

  3. excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法

    excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法 office2007应该遇到“向程序发送命令时出现 问题”,设置为以管理员运行也不好用,重装office也不好用,下面介绍下 ...

  4. xmind使用教程思维导图

    xmind使用教程思维导图 开始XMind旅程标记: 仅需2个快捷键 1 点击快捷键 创建同级主题 创建子主题 2 输入 选中主题后, 双击鼠标左键 或 单击空格键, 进入编辑状态. 3 其他内容 您 ...

  5. php 获取随机数的几个方式

    php 获取随机数的几个方式 1.直接获取从min-max的数,例如1-20:$randnum = mt_rand(1, 20); 2.在一个数组里面随机选择一个(验证码的时候需要字母.数字混合的情况 ...

  6. Notepad++ 主题配色配置

    以下方法来源网络,仅供参考: 方案1: 1.主题名称:Obsidian 2.字体字号:Courier New 10 (这里字体你可以随意选择,让自己满意即可) 3.设置方法:设置---语言格式设置-- ...

  7. Kali更新deb源

    vim /etc/apt/sources.list #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib ...

  8. c++标准之于gcc/vc/boost等实现相当于jsr规范之于sunjdk/ibmjdk/tomcat/weblogic等实现

    春节放假期间,一直在学习c++,越想越发现c++标准之于gcc/vc/boost等实现相当于jsr规范之于sunjdk/ibmjdk/tomcat/weblogic等实现

  9. Win10 Ubuntu 双系统 卸载 Ubuntu

    Win10 Ubuntu 双系统 卸载 Ubuntu 其实卸载 Ubuntu 系统很简单,进 win10 系统之后,磁盘管理,格式化 Ubuntu 的磁盘就可以了. 但是最费劲的是什么呢? 就是格式化 ...

  10. [省选模拟]Rhyme

    考的时候脑子各种短路,用个SAM瞎搞了半天没搞出来,最后中午火急火燎的打了个SPFA才混了点分. 其实这个可以把每个模式串长度为$K-1$的字符串看作一个状态,这个用字符串Hash实现,然后我们发现这 ...