1、什么是 localStorage ？

使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage ：

sessionStorage
临时存储，为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载。
localStorage
长期存储，与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在。

2、使用方法

2.1 保存

// Json对象
const user = {name: 'sugar', 'cnt': '22'};
localStorage.setItem('userJson', JSON.stringify(user));// 字符串
const str = "sugar";
localStorage.setItem('userString', str);

2.2 获取

// Json对象
var data1 = JSON.parse(localStorage.getItem('userJson'));// 字符串
var data2 = localStorage.getItem('userString');

2.3 删除

// 删除一个
localStorage.removeItem('userJson');// 删除所有
localStorage.clear();

3、案例展示

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><title></title>
</head>
<body><div id="app"><input v-model="text" /><button @click="cun">保存</button><button @click="cha">查询</button><button @click="shan">删除</button><button @click="gai">修改</button></div></body>
<script>new Vue({el: "#app",data: {msg: '1',text: ''},methods: {cun() {localStorage.setItem('data', this.text);},cha() {alert(localStorage.getItem('data'));},shan() {localStorage.removeItem('data');},gai() {var cnt = parseInt(localStorage.getItem('data'));localStorage.setItem('data', cnt+1);}}})
</script>
</html>

Vue 中使用 localStorage 详解相关推荐

vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
在vue中引入css,详解在Vue中有条件地使用CSS类
详解在Vue中有条件地使用CSS类 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了详解在Vue中有条件地使用CSS类,编程之家小编觉得挺不 ...
Vue中$refs 使用详解
js中想要获取dom节点一般用document.querySelecto('.input'),然后获取input的值. 在vue中绑定ref就不需要在获取dom节点了,直接绑定在input上,然后 $ ...
php watcher,vue 中的 watcher详解
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher .这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化.当你想要在数据变化响应时,执行异步操作或开 ...
Vue中的v-slot详解，作用域插槽和具名插槽
1.具名插槽有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
Vue学习：Vue中的路由详解（完整版）
一.vue-router的理解首先,需要理解一下vue-router: vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应用只有一个完整的页 ...
vue中watch的详解
Watch概述一个对象,键是需要观察的表达式,值是对应回调函数.值也可以是方法名,或者包含选项的对象.Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性. ...
关于Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...

Vue 中使用 localStorage 详解

文章目录

1、什么是 localStorage ？

2、使用方法

2.1 保存

2.2 获取

2.3 删除

3、案例展示

Vue 中使用 localStorage 详解相关推荐

最新文章

热门文章