浏览器端存储相关

置顶一枚形成良好习惯的前端猿

已于 2023-09-13 20:27:05 修改

阅读量79

点赞数

文章标签：前端缓存

于 2023-06-16 17:28:43 首次发布

本文链接：https://blog.csdn.net/qq_41113298/article/details/131251097

版权

文章讨论了Web存储的不同方式，包括Cookie、Session、LocalStorage以及Vuex在状态管理中的应用。Cookie适用于服务器通信但存储有限，Session存储用户会话信息，LocalStorage实现持久化数据存储，而Vuex主要用于Vue组件间的状态管理。登录流程中，用户信息和Token通常分别存储在Vuex和LocalStorage中。

摘要由CSDN通过智能技术生成

cookie、session、localstorage、vuex、持久/非持久化存储及应用场景

cookie 缓存，不设置时间是会话存储，存在内存，设置了过期时间存在硬盘按设置来。本身用于浏览器和server通信
//缺点：1.存储大小4kb 2.请求时需要发送到服务端，增加请求数量 3.只能用ducument.cookie= 来修改太过简陋
session 会话存储，窗口关闭清除。都在客户端保存,，不参与服务器通信
//优点：专门为存储而设计，最大可存5M

localstorage 本地持久化存储
vuex 状态管理存在内存(快)

F5强制刷新清除的是内存
应用场景：vuex用于组件间传值，localstorage和session用于不同页面间传值

持久化数据: 存到磁盘、浏览器中、数据中(永久数据)
非持久化的数据:内存中(瞬时数据)

登录流程

1.点击登录按钮获取微信用户的基本信息
2.将用户的基本信息存储到 vuex
3.登录获取 Token 字符串
4.将Token存储到 vuex

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一枚形成良好习惯的前端猿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

在vue中使用vuex和session Storage保存用户登录状态

一路向北

09-08

9267

1.安装vuex 使用npm包管理工具来安装Vuex，命令格式如下所示： npm install vuex --save 在命令中加上-save是因为这个包需要在生产环境中使用更多安装方式请参考：Vuex 安装 2.安装完成后构建如下目录 vuex的目录结构： getters => 从基本数据派生的数据 mutations => 提交更改数据的方法，同步！ ...

cookies、sessionStorage和localStorage以及vuex解释及区别

BUG_devil的博客

08-01

826

VUE cookie、vuexl、ocalstorage、sessionStorage

参与评论您还未登录，请先登录后发表或查看评论

vuex使用时避免刷新后保存内容丢失使用session保存，那和session直接保存有什么区别呢？

肖肖肖丽珠的博客

07-07

423

我们知道vuex保存的内容如果刷新了就会丢失，所以我们在保存的时候利用js存储技术（localStorage、sessionStorage、cookie）来进行处理 Vue中使用vuex在页面刷新之后状态不丢失的解决方法但是那和我直接利用js存储技术（localStorage、sessionStorage）有什么区别呢？首先vuex是用在单页面直接通信的，他可以实现实时更新，一旦某个地方修改了其他用到的地方也能马上改变。主要是用来解决组件之间的通讯问题。一个项目都是在store里面定义变量

vuex和localstorage,sessionStorage存储方式，及区别

sunluyi的博客

01-06

1307

sessionStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。用法：存： // 1. 点（.）运算符 sessionStorage.lastname = 'key'; 2. 方括号（[ ]）运算符 sessionStorage['lastname'] ...

vuex结合session存储数据，解决页面刷新数据丢失问题

qq_41552234的博客

09-08

4461

vuex结合session存储数据，解决页面刷新数据丢失问题文章目录vuex结合session存储数据，解决页面刷新数据丢失问题前言一、原因：二、解决思路：1.本地存储方法:2.实现步骤：3.优化：前言在项目中表单筛选项里，选择完之后刷新页面数据就变了，没有保留在自己选择的选项上。在项目中是使用vuex保存数据，但是网页刷新后，store中保存的数据丢失了。提示：以下是本篇文章正文内容，下面案例可供参考一、原因： vuex作为全局的数据状态管理机制，store中的数据是保存在运行内存中，

jStorage一个简单的键值数据库用于在浏览器端存储数据

08-10

jStorage是一个轻量级的JavaScript库，它为Web应用程序提供了一个在浏览器端存储数据的解决方案。这个库允许开发者以键值对（key-value pairs）的形式存储JSON对象，类似于本地存储（localStorage）和会话存储...

解析浏览器端的AJAX缓存机制

09-02

首先，理解AJAX缓存的工作原理：当使用AJAX发送请求到服务器时，浏览器会在首次请求时与服务器交互获取数据，并将返回的数据存储在本地缓存中。对于后续的相同请求，浏览器会尝试从缓存中直接获取数据，而不是再次向...

基于WebAssembly的浏览器端视音频处理.pdf

08-21

WebAssembly是一种新型的字节码格式，它被设计为一种安全、快速、平台无关的编译目标，能够使得开发人员使用诸如C、C++、Rust等编程语言编写代码，并将其编译为WebAssembly字节码，这样可以在浏览器端运行。...

即时聊天系统 http浏览器端

09-20

在本项目中，我们关注的是“即时聊天系统”的浏览器端实现，这是一个基于HTTP协议的解决方案，用户可以通过标准的Web浏览器进行交互。这个系统通常会利用WebSockets或者长轮询等技术来实现数据的即时传输，从而达到...

浏览器端存放数据技术.txt

07-17

随着互联网技术的发展与Web应用功能的日益丰富，浏览器端的数据存储技术变得尤为重要。在客户端进行数据存储不仅可以减轻服务器的压力，提高应用性能，还能为用户提供更加流畅和个性化的体验。本文将详细介绍两种...

关于将Vuex存储数据存入sessionStorage使用的过程

最新发布

weixin_53492834的博客

03-22

658

6.创建Login.vue文件通过触发登录按钮的点击事件触发dispatch方法调用user模块的GetInfo方法(当然这个只是个简单的demo用于讲述如果存储的过程并没有详细写关于登录的细节)在我们开发系统的时候往往在不同的模块需要调用相同的数据去展示或者供接口使用，所以可以通过将数据存储Vuex中再将其存入sessionStorage使用。1.创建store文件夹并创建index.js文件用于动态加载modules目录下所有.js文件，并将其导出的默认值存储到一个对象中。

vuex存储和本地存储(localstorage、sessionstorage)的区别，总算知道咋用了

滴水石穿

07-01

465

1. sessionStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。　　用法：储存： 1. 点（.）运算符 sessionStorage.lastname = ‘JSAnntQ’; 2. 方括号（[ ]）运算符 sessionStorage[‘lastname’] = ‘JSAnntQ’; 3. localStorage.setItem　　　　

6-6 vuex配合h5的session解决浏览器刷新问题

m0_64729245的博客

01-28

255

member:window.SessionStorage.get(MEMBER) || {} 和 window.SessionStorage.set(MEMBER,_member)// 浏览器关闭下一次重新打开还是能读取缓存： localStorage。// 所有的session key都在这里统一定义，可以避免多个功能使用同一个key。// 会话缓存只对当前会话有用：sessionStorage。//_membe r带表外部传入的值。//转换成对象json格式。

利用vuex+vue-session实现数据共享

weixin_42661959的博客

01-27

1190

利用vuex和vue-session实现数据共享 1、安装vuex npm install vuex 2、vuex安装完成之后，在src文件下建个store文件夹下建个index.js main.js文件下注册： new Vue({ el: "#app", router, store, render: (h) => h(App), }); import store from './store' 3、index.js代码：功能为储存用户id import Vue from 'vu

Vue知识点---Vuex、路由

m0_63679126的博客

09-18

1560

vue中的vuex、路由

在vue中使用vuex和sessionStorage保存用户名

weixin_41997724的博客

01-25

7610

安装 vuex npm install vuex --save vuex安装完成之后，构建如下目录： main.js文件下注册： //实例化 store import store from './vuex/store.js' new Vue({ el: '#app', store, //实例化 store router, components: { App }, ...

在vue中使用session Storage和vuex保存用户登录状态

热门推荐

hellojoy的博客

04-10

2万+

https://www.jianshu.com/p/b2b634c77502 最近做项目需要保存用户登录状态，要做到刷新页面用户状态不变，以及实现登出功能。实际上是很简单的，但是对于vue新手来说，我找了好几个网址都讲的不是很清楚，磕磕绊绊理清了关系，在这里总结一下。首先，vuex安装完成之后，构建如下目录： vuex目录结构这样做的目的是降低代码的耦合度，方便以后的修改与维护。 ...

vue登录状态管理,vuex+sessionStorage

大桶爆米花eee

01-29

4282

在使用vuex保存登录状态时，发现刷新页面就需要重新登录，因此将vuex与sessionStorage绑定在一起，这样刷新页面就不会掉了文件结构 index.js import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions' import * as getters from './get...

Vuex数据持久化存储

m0_51431448的博客

07-23

1万+

Vue项目中使用Vuex作为状态管理，相当于全局的变量存储，可以在所有的vue组件中共享数据、动态修改其状态。vuex是单向数据流，存在vuex中的变量都是响应式数据，组件中一般会通过computed来使用store中的状态、且有缓存但是当我们去刷新浏览器的时候，store中的状态都会被清空、重新初始化为最初的状态，在某些情况下，我们可能需要将这些状态保存下来，所以这篇来介绍如何让vuex或pinia的状态持久化存储。......

服务器端访问和浏览器端访问的区别

07-15

服务器端访问和浏览器端访问有一些关键的区别。 1. 客户端和服务器端：浏览器端访问是由客户端发起的，而服务器端访问是由服务器发起的。浏览器作为客户端发送请求，服务器接收请求并返回响应。 2. 请求和响应：浏览器端访问通过HTTP请求发送给服务器，服务器处理请求并返回HTTP响应给浏览器。这可以是HTML、CSS、JavaScript、图像等文件。 3. 网络连接：浏览器通过网络连接与服务器进行通信。使用HTTP或HTTPS协议进行数据传输。 4. 用户界面：浏览器端访问通过浏览器展示页面内容，用户可以与页面进行交互。服务器端访问通常是在服务器上运行的脚本或应用程序，没有用户界面。 5. 功能和目的：浏览器端访问主要用于展示和交互，通过浏览器呈现信息给用户。服务器端访问可以执行各种任务，如处理业务逻辑、存储数据、处理请求等。总的来说，浏览器端访问是用户通过浏览器与服务器进行交互，获取网页内容和资源。而服务器端访问是服务器主动与其他服务器或客户端进行通信，执行各种功能和任务。