Vue 中使用 localStorage 详解
2021/11/4 23:12:00
本文主要是介绍Vue 中使用 localStorage 详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 1、什么是 localStorage ?
- 2、使用方法
- 2.1 保存
- 2.2 获取
- 2.3 删除
- 3、案例展示
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 详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set
- 2024-03-01react native uuid
- 2024-02-29vuejs sidebar