Vue.js Client-Side Storage;( Web Storage／localStorage)
2024-10-20 18:44:37
原文：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)
}
}
最新文章
- centos下MYSQL 没有ROOT用户的解决方法。
- PYTHON 函数的普通参数
- block fomating context
- 利用SlidingPaneLayout实现侧滑
- IDE硬盘 SCSI硬盘 SATA硬盘
- Kinect For Windows V2开发日志一：开发环境的配置
- front-end
- 安装wampserver2时出现的问题
- TCP/IP笔记 三.运输层(4)——TCP链接管理与TCP状态机
- Oracle与Sql Server复制表结构和数据
- linq左连接查询加上into后怎么查询右表是否为空
- H3CNE实验：配置基于端口划分的VLAN及Trunk
- 团队作业8——第二次项目冲刺（Beta阶段）Day7——5.26
- Python笔记2.1
- Practical Mathematical Handwriting
- http 自定义信息头（header）设置与获取
- bypass safedog upload
- 基本数据类型(dict)
- 用eval似乎会执行结果一次性返回,结果显示的是一行
- Oracle VM VisualBox 虚拟机创建共享文件夹。