sessionStorage与localStorage的比较与使用场景

最新推荐文章于 2025-03-24 00:25:29 发布
最新推荐文章于 2025-03-24 00:25:29 发布
阅读量4.8k 收藏 18
点赞数 3
分类专栏： 前端 文章标签： sessionStorage localStorage Cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25135655/article/details/105969378
版权

前言：我们都知道Cookie是进行权限验证的，它是用户第一次请求服务器后由服务端生成返给客户端的。现在有个需求需要保存用户的权限数据下次请求服务器时带服务端(数据有点大超过4kb)，由于传统的Cookie最大保存数据不能超过4kb，于是问题来了，客户端如何保存这个权限数据呢？

 

一，HTML5的的WebStorage提供了客户端存储的2中解决方案，分别是sessionStorage与localStorage。它们的最大保存数据大小是5M

 

二，对比下Cookie

 

完

 

 

sessionStorage 和 localStorage 的使用
webchang的博客
02-19 1万+
sessionStorage 和 localStorage的属性和方法，事件的触发
深入理解Web存储机制：Cookie、SessionStorage与LocalStorage的区别
chaosweet的博客
01-13 1178
选择正确的工具是成功的开始。
localStorage与sessionStorage的使用场景
leng0920的博客
11-16 652
localStorage与sessionStorage的使用场景
cookie、session、localStorage 和 sessionStorage 区别及应用场景
weixin_43190804的博客
02-23 4273
1.概念理解 Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。 sessionStorage 与 localStorage 的接口类似，相较cookie一般存储大一些的数据，但保存数据的生命周期与
JavaScript 深入解析sessionStorage：特性、应用与最佳实践
最新发布
chenmin139400的博客
03-24 1253
需要自动清理的敏感数据单次会话状态保持页面间临时参数传递使用原则始终假设存储空间有限敏感信息必须加密配合页面生命周期管理数据重要数据应有服务端备份对于需要持久化存储的场景，建议结合IndexedDB或localStorage实现分层存储架构。正确使用sessionStorage能显著提升用户体验，同时保障数据安全性。
cookie,sessionStorage,localStorage的区别及应用场景、http状态码含义、使用token登录、无感登录
热门推荐
muzidigbig的博客
08-26 1万+
浏览器的存储方式有哪些？；cookie的存储大小：4kb， 存储量小，资源浪费，使用麻烦（封装） 2.localstorage：客户端存储，容量更大（一般约为 5MB），持久化存储，除非主动删除；操作方便，永久存储，兼容性较好；H5加入的以键值对为标准的方式 3.sessionstorage：客户端存储；会话存储、不同标签页不共享；当前页面关闭后就会立刻清理，会话级别的存储方式。但是刷新网页不会清除。 响应状态码
理解 cookie、session、localStorage 和 sessionStorage 区别及应用场景
diwang_718的博客
04-13 575
cookie 和 session cookie是存储在客户端浏览器中的，一般由服务器端生成，用于标识用户身份。 session是存储在服务器端，用于跟踪浏览器用户身份的会话方式。 他们的区别： 1、cookie存储在浏览器端，session存储在服务器端。 2、使用方式 （1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，浏览器关闭cookie数据不存在，这种cook...
Web Storage：浏览器端数据储存机制
weixin_42779798的博客
08-20 1139
1、概述 Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。 sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期...
Web前端开发中JavaScript的sessionStorage与localStorage的详细介绍及应用场景
02-13
内容概要：本文详细介绍了在现代Web应用日益复杂的背景下，HTML5提供的两种本地存储方式——sessionStorage和localStorage的工作机制和使用技巧。这两种存储机制都允许浏览器以键值对形式存放数据，并提供简单的API...
一篇文章搞懂Cookie, sessionStorage 和 localStorage
AQiukai的博客
08-08 1357
本文章是本人在实习过程中遇到的知识点的自我整理和汇总，主要用于自己记录和回顾，如果可以帮到别人也是十分乐意的。这次详细解释了cookie、localStorage、sessionStorage的详细说明和这三者的区别
cookies，sessionStorage 和 localStorage 的区别1
08-08
使用 cookies、sessionStorage 和 localStorage 可以减少网络流量，提高页面加载速度。同时，这些机制还可以提供更好的用户体验，例如，用户可以在不需要重新登录的情况下继续购物。 结论 cookies、sessionStorage...
localStorage、sessionStorage、cookie的区别、用法及使用场景
amyleeYMY的博客
09-21 1200
参考文章：https://segmentfault.com/a/1190000004556040                   https://segmentfault.com/a/1190000012057010#articleHeader0 webStorage是本地存储，存储在客户端，包括localStorage和sessionStorage。 localStorage lo...
什么场景下用到localstorage?
weixin_34302798的博客
07-11 664
localstorage使用在菜单栏的时候，将每一个菜单的数据记录下来。 转载于:https://www.cnblogs.com/duanzhange/p/9293924.html
sessionStorage与localStorage
千城墨白&的博客
05-15 1337
sessionStorage与localStorage都是本地存储的一种方式，主要用于存储一些信息以便于开发者使用 1.sessionStorage为临时存储，也叫会话存储,存储的值只要浏览器不关闭就一直存在，存储方式为 sessionStorage.setItem('key',value) 这种存储方式会将数据存入浏览器的临时存储中，以谷歌浏览器为例，点击F12键，再点击Application，再点击Session Storage即可看到临时存储的数据。 <!DOCTYPE ht...
session,cookie,sessionStorage,localStorage的区别及应用场景
choupixiaolin的博客
10-26 1345
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 区别： 1、保持状态：cookie保存在浏览器端，session保存在服务器端 2、使用方式： （1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie
cookie、sessionStorage、localStorage 详解及应用场景
weixin_34195364的博客
07-28 312
cookie、sessionStorage、localStorage 详解及应用场景 Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生 cookie Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 了解cookie 要表示唯一的一个co...
sessionStorage的使用
qq_42566295的博客
09-13 310
写入：           sessionStorage.setItem('scene',JSON.stringify({"scene":scene})); 获取： var sceneObj = JSON.parse(sessionStorage.getItem('scene')) == null ? {"scene":''} : JSON.parse(sessionStorage.get...
sessionStorage使用
peade的博客
12-02 6695
sessionStorage在MDN里的描述是这样的： sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原...
sessionstorage和localstorage的使用场景
07-17
`sessionStorage` 和 `localStorage` 都是浏览器提供的用于存储数据的本地存储机制，但它们有各自的适用场景： 1. `sessionStorage`: 这是一种临时性的存储，它保存的数据会随着浏览器窗口关闭而清除。适合用于需要在用户浏览会话期间保持状态的数据，比如购物车的内容、用户的登录信息等。因为数据不会持久化，所以不适合存放敏感信息，以防数据丢失。 2. `localStorage`: 跟 `sessionStorage` 相比，它的生命周期更长，直到用户清理浏览器缓存或关闭浏览器才会删除。常用于存储一些长期不变或用户自定义设置的信息，如网站主题、用户偏好设置等。 使用场景举例： - `sessionStorage`：当用户在网站的不同页面之间切换但仍保持交互时，可以存储当前页面的状态，如页面搜索关键字。 - `localStorage`：用户的个人信息设置，如语言首选项，网站推荐内容等，不需要刷新页面就依然有效。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值