详解Vue中localstorage和sessionstorage的使用

最新推荐文章于 2024-08-15 20:33:20 发布
最新推荐文章于 2024-08-15 20:33:20 发布
阅读量1.9w 收藏 9
点赞数 1
分类专栏： Vue.js Storage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dx18520548758/article/details/79740077
版权
本文讨论了在Vue项目中使用localStorage和sessionStorage时遇到的问题，包括耦合度过高、命名冲突和存储空间浪费。为了解决这些问题，提出了封装存储方法、规范命名空间和使用规范等解决方案。建议全局使用的东西存储在localStorage，临时数据存储在sessionStorage，并在数据量过大时考虑其他存储方案，如Indexeddb。同时，文章也提醒开发者注意事件处理的清理，避免内存泄漏。
摘要由CSDN通过智能技术生成

1. 项目使用中暴露出来的几个问题

大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多

项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染

因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用

2. 解决办法

封装storage的使用方法，统一处理

规范storage的key值的命名规则
规范storage的使用规范

2.1. 封装统一的方法

封装成方法可以降低耦合度，可以方便切换实现方式，可以控制存储量大小

改变实现可以通过配置不同的参数来实现

编辑如图所示的项目结构

代码实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/*
  * storage.js
  */
/*
  * @Desc: 本地数据存储方法封装
  * @Ref:
  *  https://github.com/WQTeam/web-storage-cache
  *  https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
  * @Explain:为了不new对象，只能多写几遍
  * @Example:
  *
  * 1、LocalStorage的使用
  * import storage from '@/utils/storage.js'
  * storage.setItem('shiguoqing0',[1,2,3,4,5,6])
  * storage.setItem('shiguoqing1',{userId:'dfdf',token:11232323})
  * storage.setItem('shiguoqing2','dfdfdf')
  * console.log(storage.getItem('shiguoqing0'))
  * console.log(storage.getItem('shiguoqing1'))
  * console.log(storage.getItem('shiguoqing2'))
  * storage.removeItem('shiguoqing2')
  *
  *
  * 2、SessionStorage的使用
  * storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
  *
  * */
// TODO:其他方法的实现
// TODO:超时时间的设置
/*
  * 方法实现
  * */
import local from './storage/localstorage.js'
import session from './storage/session.js'
import cookies from './storage/cookies.js'
import json from './storage/json.js'
/*
* 函数体
* */
let storage= {
  config:{
   type:'local',// local,session,cookies,json
   expires:new Date().getTime() + 100 * 24 * 60 * 60 * 1000
  },
  getStorage(options){
  
最低0.47元/天 解锁文章
Jarvan大熊
关注
专栏目录
详解vue中localStorage的使用方法
12-09
什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage 1.sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 2.localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是: 当我们首次访问设置Cookie的页
Vue中localstorage和sessionstorage的使用
包子的博客
12-10 4113
请在这里选择你想要的LocalStorage和SessionStoragelocalStorage使用方法Vue中实现用例 Vue中使用LocalStorage和SessionStorage LocalStorage和SessionStorage 在使用之前，我们先废话的了解一下LocalStorage和SessionStorage 1.sessionStorage(临时存储)：为没一个数据维持...
深入浅出 localStorage 存储：浏览器本地存储的利器
最新发布
weixin_63490470的博客
08-15 1267
localStorage 是 HTML5 中引入的一种新的本地存储机制，它允许网页在用户浏览器中存储键值对数据，并且这些数据在浏览器关闭后仍然可以保留。localStorage 存储为开发者提供了在客户端存储数据的便捷方式，可以用于缓存数据、保存用户偏好、实现离线功能等，极大地提升了 Web 应用的性能和用户体验。
5.6 Vue中的localStorage和sessionStorage浏览器端数据存储机制
蚊者逆袭的博客
04-26 3710
在 Vue 中，localStorage 是一种用于浏览器端数据存储的机制，它可以让你把数据存储在客户端本地。
Vue进阶（幺捌玖）：localStorage 与 sessionStorage 应用总结
IT全栈 华强工作室
03-19 3629
一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage的优势与...
vue中 localStorage的使用方法（详解）
热门推荐
dt1991524的博客
11-21 3万+
vue中实现本地储存的方法：localStorage，在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 (1).储存数据localStorage.se...
【Vue】浏览器缓存sessionStorage、localStorage、Cookie
慕白Lee的博客
09-13 4020
sessionStorage用于在浏览器会话期间存储数据。当用户关闭浏览器标签页或窗口时，存储在sessionStorage中的数据将被清除。
详解vue中localstorage和sessionstorage的使用
08-23
要在Vue中使用LocalStorage和SessionStorage，你可以按照以下步骤进行： 1. 首先，你需要在Vue组件中导入LocalStorage和SessionStorage方法。你可以使用`import`语句将它们导入到你的组件中。 2. 接下来，你可以...
vue浏览器缓存sessionStorage、localStorage、Cookie
weixin_65644264的博客
06-24 648
适用于存储会话数据。：适用于存储长期数据。Cookie：适用于需要与服务器交互的数据。选择哪种存储方式取决于具体需求和数据的生命周期。
【Vue】vuex存储和本地存储(localstorage、sessionstorage)的区别
Enchanted to meet U
07-22 330
摘自：https://www.cnblogs.com/jsanntq/p/9288144.html 一、区别 1.存储 vuex存储在内存 localstorage（本地存储）则以文件的方式存储在本地,永久保存； sessionstorage( 会话存储 ) ,临时保存。 注：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理 2.应用场景 vuex用于组件之间的传值 loca.
Vue使用localStorage和sessionStorage存储数据
m0_50488756的博客
12-06 1646
一 什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在 二 使用方法 注意:sessionStorage 和 local
VUE学习总结——localStorage 和 sessionStorage 属性
砳缝的渴望
08-06 483
ps： localstorage和sessionstorage的存储量在不同的浏览器中基本是5M localstorage和sessionstorage的存储是跟着域名来的 boss.com下localstorage存储是5M b2b..com下localstorage存储也是5M 即使这次问题解决了，但是我们应该定一套方案，充分利用一个域名下，localstorage和sessionstorage的共10M空间 全局使用的东西，共享的东西，永久存储的东西储存在localstorage中 不需
VUE vuex、localStorage和sessionStorage的区别
ICanWin_lll的博客
08-16 787
一、vuex vuex是vue中的状态管理机制,用于组件之间共享数据，数据保存在内存中 一个组件的数据变化会映射到使用这个数据的其他组件。再说localstorage 刷新页面的话，之前存在vuex里的数据会被初始化掉，vuex里面的数据会丢失掉。 二、localStorage localstorage（本地存储）则以文件的方式存储在本地,永久保存 localStorage会持久化存储，而且在多页面可以共享 localStorage无法和Vue很好的结合，修改之后不会触发View的响应式变化
cookie、localStorage、sessionStorage的存储
火腿肠的博客
11-02 117
懒人：(由于Storage两个相似 所以放在一起) cookie localStorage sessionStorage 存储大小 4K 5M 同localStorage 有效期 拥有有效期 永久存储 仅在当前会话下有效，关闭页面或浏览器后被清除 存储位置 发送到服务器端，携带在HTTP头中，存储在内存中 存储在浏览器端且不参与和服务器的通信。 同localStorage 路径 在同源且符合path规则的文档之间共享 仅在客户端（即浏览器）中保存，在同源文档之间共享 AP
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
游坦之的博客
04-30 1万+
存储的四个方法 1、存储 localStorage.setItem(key, value); key和value都必须是字符串。 例如：存储数据 【效果图】 【问】如果要传一个对象该怎么办？ 如果直接将对象作为value放进去，会出现这样的现象 用JSON（JSON.stringify() ）转换一下，将对象先转化成字符串，如下 然后就可以将对象，存进去了 2、读取localStorage.setItem(key） 例如：读取存储的数据 【效果图】...
Vue之bus数据传输优点以及弊端
南方硅人的博客
02-10 3761
Vue之bus数据传输优点以及弊端 一、优缺点 优点： 传递数据较为方便，可以进行兄弟之间，父子之间的传递 缺点： 必须先on监听才能进行emit触发 二、使用方法 2.1 自行创建Bus组件 创建一个名为Bus.js的公共组件 //抛出Bus 供传输数据的组件引用 代码-->> import Vue from 'vue' export default new Vue 引用组件 ...
Vue入门(四)LocalStorage的使用
fajing_feiyue的博客
11-27 5504
前言 这个系列是vue入门系列，在讲解的时候主要以例子，展示一些vue内容的基本用法。在vue项目中使用LocalStorage 的场景非常多，这里用一个小例子展示LocalStorage的使用。 案例 一、LocalStorage 的作用 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在
Vue 中使用 localStorage 详解
方糖世界
11-04 2万+
文章目录1、什么是 localStorage ？2、使用方法2.1 保存2.2 获取2.3 删除3、案例展示 1、什么是 localStorage ？ 使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage ： sessionStorage 临时存储，为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载。 localStorage 长期存储，与 sessionStorage 一样
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值