面试题之Vuex,sessionStorage,localStorage的区别
Vuex、localStorage 和 sessionStorage 都是用于存储数据的技术,但它们在存储范围、存储方式、应用场景等方面存在显著区别。以下是它们的详细对比:
1. 存储范围
-
Vuex:
-
是 Vue.js 的状态管理库,用于存储全局状态。
-
数据存储在内存中,页面刷新后数据会丢失。
-
只在当前应用实例的生命周期内有效。
-
-
localStorage:
-
是浏览器提供的 Web Storage API 的一部分。
-
数据存储在浏览器的本地存储中,即使关闭浏览器或刷新页面,数据仍然存在。
-
数据没有过期时间,除非手动清除。
-
-
sessionStorage:
-
同样是 Web Storage API 的一部分。
-
数据存储在浏览器的会话存储中,数据在浏览器的会话期间有效。
-
关闭浏览器标签页或窗口后,数据会被清除。
-
2. 存储方式
-
Vuex:
-
基于 JavaScript 对象存储数据。
-
数据存储在内存中,通过 Vue 的响应式系统实现数据的动态更新。
-
支持复杂的数据结构(如对象、数组等)。
-
-
import { createApp } from 'vue'
import { createStore } from 'vuex'// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state) {
state.count++
}
}
})const app = createApp({ /* 根组件 */ }) // 将 store 实例作为插件安装
app.use(store)store.commit('increment')//通过 store.commit 方法触发状态变更
console.log(store.state.count) // 你可以通过 store.state 来获取状态对象
-
localStorage 和 sessionStorage:
-
数据以键值对的形式存储,键和值都必须是字符串。
-
如果要存储复杂数据结构(如对象或数组),需要通过
JSON.stringify()将其转换为字符串,读取时再通过JSON.parse()转换回原始格式。
-
3. 存储容量
-
Vuex:
-
存储容量受限于浏览器的内存大小,通常可以存储较大的数据量,但过多的数据可能会影响性能。
-
-
localStorage 和 sessionStorage:
-
每个存储的容量通常在 5MB 左右(具体取决于浏览器)。
-
如果超出容量限制,浏览器会抛出错误。
-
4. 应用场景
-
Vuex:
-
用于管理 Vue 应用的全局状态,如用户登录状态、主题切换、购物车数据等。
-
适合在组件之间共享数据,尤其是在多个组件需要访问同一状态时。
-
数据存储在内存中,适合临时存储,不适用于持久化存储。
-
-
localStorage:
-
用于持久化存储数据,如用户偏好设置、主题模式、用户自定义数据等。
-
适合存储不频繁更新但需要长期保存的数据。
-
-
sessionStorage:
-
用于存储单次会话的数据,如登录态、表单缓存等。
-
适合存储仅在当前会话期间需要的数据,关闭浏览器后数据自动清除。
-
5. 安全性
-
Vuex:
-
数据存储在内存中,相对安全,但仍然可以通过开发者工具查看。
-
不适合存储敏感信息(如密码等)。
-
-
localStorage 和 sessionStorage:
-
数据存储在浏览器的本地存储中,可以通过开发者工具轻松访问。
-
不适合存储敏感信息(如密码、令牌等),因为它们容易被恶意脚本窃取。
-
6. 性能
-
Vuex:
-
数据存储在内存中,访问速度快。
-
由于是响应式系统,数据更新会自动触发组件重新渲染。
-
-
localStorage 和 sessionStorage:
-
数据存储在浏览器的本地存储中,访问速度相对较慢。
-
每次读写操作都会触发浏览器的 I/O 操作,可能会对性能产生一定影响。
-
7. 同步性
-
Vuex:
-
是单向数据流,通过
actions、mutations等方法更新状态,确保状态的同步性和一致性。
-
-
localStorage 和 sessionStorage:
-
数据存储是独立的,需要手动同步数据。
-
如果多个标签页同时操作存储,可能会导致数据不一致。
-
总结
-
Vuex 适合管理 Vue 应用的全局状态,数据存储在内存中,适合临时存储。
-
localStorage 适合持久化存储不频繁更新的数据,数据存储在浏览器本地。
-
sessionStorage 适合存储单次会话的数据,数据存储在浏览器会话中。
在实际开发中,可以根据需求选择合适的存储方式,也可以结合使用它们来满足不同的需求。
相关文章:
面试题之Vuex,sessionStorage,localStorage的区别
Vuex、localStorage 和 sessionStorage 都是用于存储数据的技术,但它们在存储范围、存储方式、应用场景等方面存在显著区别。以下是它们的详细对比: 1. 存储范围 Vuex: 是 Vue.js 的状态管理库,用于存储全局状态。 数据存储在内…...
window中git bash使用conda命令
window系统的终端cmd和linux不一样,运行不了.sh文件,为了在window中模仿linux,可以使用gui bash模拟linux的终端。为了在gui bash中使用python环境,由于python环境是在anaconda中创建的,所以需要在gui bash使用conda命…...
象棋掉落动画(局部旋转动画技巧)
1.被撞击阶段:根据被撞击速度,合理设置被撞距离 2.倒地阶段:象棋倒地的同时稍微前移 3.滚地阶段:象棋滚地后停止,在最后5帧内稍微回转一下。这里启用“PRS参数”的旋转来制作局部旋转动画...
Pycharm 2024在解释器提供的python控制台中运行py文件
2024版的界面发生了变化, run with python console搬到了这里:...
课题推荐:高空长航无人机多源信息高精度融合导航技术研究
高空长航无人机多源信息高精度融合导航技术的研究,具有重要的理论意义与应用价值。通过深入研究多源信息融合技术,可以有效提升无人机在高空复杂环境下的导航能力,为无人机的广泛应用提供强有力的技术支持。希望该课题能够得到重视和支持&…...
《DeepSeek训练算法:开启高效学习的新大门》
在人工智能的浪潮中,大语言模型的发展日新月异。DeepSeek作为其中的佼佼者,凭借其独特的训练算法和高效的学习能力,吸引了众多目光。今天,就让我们深入探究DeepSeek训练算法的独特之处,以及它是如何保证模型实现高效学…...
promise用法总结以及手写promise
JavaScript中的 Promise 是用于处理异步操作的对象,它代表了一个异步操作的最终完成(或失败)及其结果值。Promise 是异步编程的一种更简洁和更可读的方式,避免了回调地狱的问题。 Promise 的基本概念 一个 Promise 是一个表示异步…...
春招项目=图床+ k8s 控制台(唬人专用)
1. 春招伊始 马上要春招了,一个大气的项目(冲击波项目)直观重要,虽然大家都说基础很重要,但是一个足够新颖的项目完全可以把你的简历添加一个足够闪亮的点。 这就不得不推荐下我的 k8s 图床了,去年折腾快…...
Android 11.0 系统settings添加ab分区ota升级功能实现二
1.概述 在11.0的系统rom定制化开发中,在进行系统ota升级的功能中,在10.0以前都是使用系统 RecoverySystem的接口实现升级的,现在可以实现AB分区模式来进行ota升级的,但是 必须需要系统支持ab分区升级的模式才可以的,接下来分析下看怎么样进行ota升级功能实现 2.系统sett…...
【Spring+MyBatis】_图书管理系统(上篇)
目录 1. MyBatis与MySQL配置 1.1 创建数据库及数据表 1.2 配置MyBatis与数据库 1.2.1 增加MyBatis与MySQL相关依赖 1.2.2 配置application.yml文件 1.3 增加数据表对应实体类 2. 功能1:用户登录 2.1 约定前后端交互接口 2.2 后端接口 2.3 前端页面 2.4 单…...
什么是3D视觉无序抓取?
3D视觉无序抓取是一种结合三维视觉技术、机器人控制与智能算法的工业自动化解决方案,旨在实现机器人对散乱、无序堆放的物体进行自主识别、定位和抓取的操作。其核心是通过3D视觉系统获取物体的三维空间信息,结合路径规划与避障算法,引导机械臂完成高精度抓取任务,无需依赖…...
【Java】理解字符串拼接与数值运算的优先级
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 💯前言💯代码分析1. 第一句输出2. 第二句输出3. 第三句输出 💯关键概念与深入分析1. 字符串拼接的优先级2. 运算符的优先级与结合性3. 字符串拼接与数值运算的结合 &…...
[250217] x-cmd 发布 v0.5.3:新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理
目录 X-CMD 发布 v0.5.3📃Changelog🧩 deepseek🧩 feishu|dingtalk📦 x-cmd✅ 升级指南 X-CMD 发布 v0.5.3 📃Changelog 🧩 deepseek 新增 deepseek 模块,用户可通过 deepseek 直接请求使用 …...
渗透利器:Burp Suite 联动 XRAY 图形化工具.(主动扫描+被动扫描)
Burp Suite 联动 XRAY 图形化工具.(主动扫描被动扫描) Burp Suite 和 Xray 联合使用,能够将 Burp 的强大流量拦截与修改功能,与 Xray 的高效漏洞检测能力相结合,实现更全面、高效的网络安全测试,同时提升漏…...
Linux、Docker与Redis核心知识点与常用命令速查手册
Linux、Docker与Redis核心知识点与常用命令速查手册 一、Linux基础核心 1. 核心概念 文件系统:采用树形结构,根目录为/权限机制:rwx(读/写/执行)权限,用户分为owner/group/others软件包管理: …...
DeepSeek HuggingFace 70B Llama 版本 (DeepSeek-R1-Distill-Llama-70B)
简简单单 Online zuozuo :本心、输入输出、结果 文章目录 DeepSeek HuggingFace 70B Llama 版本 (DeepSeek-R1-Distill-Llama-70B)前言vllm 方式在本地部署 DeepSeek-R1-Distill 模型SGLang 方式在本地部署 DeepSeek-R1-Distill 模型DeepSeek-R1 相关的 Models,以及 Huggin…...
Playwright入门之---命令
运行和调试测试 使用 Playwright,您可以运行单个测试、一组测试或所有测试。可以使用--project标志在一个或多个浏览器上运行测试。默认情况下,测试并行运行,并以无头方式运行,这意味着在运行测试时不会打开任何浏览器窗口&#…...
Java基于 SpringBoot+Vue的微信小程序跑腿平台V2.0(附源码,文档)
博主介绍:✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不…...
Fastapi + vue3 自动化测试平台(5)-- 封装树形结构列表生成器
使用FastAPI封装树形结构生成函数:高效处理层级数据 在Web开发中,树形结构是一种常见的数据组织形式,常用于菜单、分类、组织结构等场景。本文将介绍如何使用FastAPI封装一个通用的树形结构生成函数,支持动态选择字段,…...
【项目实战】日志管理和异步任务处理系统
这是一个高效的日志管理和异步任务处理系统,提供了多级别的日志记录、灵活的日志格式化和多种日志输出目标(控制台、文件、文件滚动)。通过异步任务循环器和线程安全的任务队列,系统能够在高并发环境下处理任务,同时避…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
