Cookie和localStorage和sessionStore的区别

最新推荐文章于 2025-01-17 09:30:59 发布
原创 最新推荐文章于 2025-01-17 09:30:59 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端

本文探讨了浏览器中三种存储类型Cookie、localStorage和sessionStorage的区别，包括存储大小、持久性及使用场景，重点介绍了setItem/getItem/removeItem的基本操作和它们的生命周期特点。

1.都是属于浏览器的本地存储，

2.Cookie的存储大小5k左右，而localStorage和sessionStore的存储大小为5M

3.Cookie是必须在环境中存在的比如vue环境，react环境，通过 document.cookie='name=zs' 它是永久存储，但是是有过期时间的，

4.localStorage是永久性存储，除非手动清除数据，而sessionStore是短时性存储，浏览器页面关闭数据自动清除，他们的api都有，存的话setItem，取的话用getItem ，删除用removeItem,后面加一个key键值对，（‘’key’，‘zset-123’）

SessionStore:边缘的会话感知数据存储
HHHH__L的博客
04-19 951
SessionStore:边缘的会话感知数据存储 SessionStore: A Session-Aware Datastore for the Edge 摘要 对于设计在边缘数据中心上运行的存储系统来说，通过依赖最终一致的模型复制数据来避免与地理分布相关的高延迟是很常见的。最终一致性适用于许多边缘应用程序，因为只要客户端与相同的副本进行交互，存储系统就可以提供会话一致性。一种更强的一致性模型，它有两个额外的重要属性:(i) read-your-writes，当客户端读取更新过的对象时，将返回更新后的值或更
详细解析cookie，sessionStroage和localStroage的区别
qq_39155611的博客
06-11 1542
详细解析cookie，sessionStroage和localStroage的区别 前面我们说到了JavaScript中的缓存对象，主要是cookie,sessionStroage和localStroage，今天我们来讲一下这三者之间的区别。 共同点 都是保存在浏览器端，且同源的。(所谓同源就是协议，域名，端口号相同)。 都是字符串类型的键值对。 区别 1.cookie HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=valu
sessionstore：sessionstore是用于多个数据库的node.js模块。 如果您使用Express或Connect可能会非常有用
02-05
介绍 Sessionstore是用于多个数据库的node.js模块。 如果您使用Express或connect可能会非常有用。 安装 $ npm install sessionstore 用法 连接到内存 var sessionstore = require('sessionstore'); var express = require('express'); var expressSession = require('express-session'); var app = express(); app.use(expressSession({ store: sessionstore
localStorage和sessionStoreage和cookie 之间的区别
weixin_47723644的博客
11-10 1057
vue组件保存数据方法简介localStoragesessionStoreagecookie区别 简介 在vue组件学习中，我们学习了利用this.$emit来实现组件之间的数据传递，接下来我们将学习利用浏览器本地存储来传递数据 localStorage localStorage的生命周期是永久，也就是说除非用户在浏览器提供的UI上清除localStorage数据，否则这些信息将永久保存。localStorage 有存储大小的限制但可以达到5M或更大。 <div id="app">
vuex知识笔记，及与localStorage和sessionStorage的区别
深蓝旭的博客
08-03 1001
菜单快捷导航 Vuex是什么东东，有什么应用场景？localStorage和sessionStorage能否替代它？ Vuex知识点State、Getter、Mutaion、Action Vuex模块化(Module) 1、Vuex概念和应用场景 　　首先，Vuex是什么，官网介绍说Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。我的理解就是Vuex就是类似于sessionStorage这样管理数据(本地存和取)的一种技术方案。 　　既然vuex类似于sessionStorage...
前端本地存储cookie、localstorage和sessionStorage之间的区别？
nick_zhang的博客
06-06 2439
cookie的使用 cookie可以设置key，value，domain，expires var name = 'one_name'; var value = '123'; var exp = new Date(); exp.setTime(exp.getTime() + 60 * 2000);//过期时间 2分钟 document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); ...
【面试题】详解Cookie、localStorage、sessionStorage区别
金鳞踏雨
11-19 787
1、存储在localStorage中，每次调用接口的时候都把它当成一个字段传给后台 2、存储在cookie中，让它自动发送，不过缺点就是不能跨域 3、拿到之后存储在localStorage中，每次调用接口的时候放在HTTP请求头的Authorization字段里面。token 在客户端一般存放于localStorage、cookie、或sessionStorage中。
Web存储技术：localStorage、Cookie与Session全面解析
m0_74825718的博客
12-19 1746
Cookie 是一种存储在用户本地计算机上的数据，它由服务器创建并发送给用户的浏览器，浏览器会将其存储起来，并在随后的请求中自动发送回服务器。请注意，这里的代码示例是基本的用法，实际应用中可能需要根据具体情况进行调整。将 session 存储在内存中，这对于开发是足够的，但在生产环境中，你可能需要使用更可靠的存储解决方案，如 Redis 或 MongoDB。了解 Cookie 的这些知识点可以帮助你更好地管理网站的身份验证、用户偏好设置以及用户跟踪等，同时确保应用的安全性和用户隐私。
前端数据存储：cookie、localStorage、sessionStorage、indexDB差异分析，及简单使用介绍
sinat_35299495的博客
08-17 1315
一，总述 特性 cookie localStorage sessionStorage indexDB 数据生命周期 一般由服务器生成，可以设置过期时间 除非主动清理，否则一直存在 页面关闭时清理 除非主动清理，否则一直存在 数据存储大小 4K 5M 5M 不限 与服务端通信 每次都会携带在 header 中，对于请求性能影响 不参与 不参与 不参与 使用原则： 如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数
《现代JavaScript高级教程》 详解Cookie, Session, SessionStorage, LocalStorage
linwu的博客
07-06 1233
Cookie是一种在客户端存储数据的机制，它将数据以键值对的形式存储在用户的浏览器中。名称和值：每个Cookie都有一个名称和对应的值，以键值对的形式表示。域（Domain）：Cookie的域属性指定了可以访问Cookie的域名。默认情况下，Cookie的域属性设置为创建Cookie的页面的域名。路径（Path）：Cookie的路径属性指定了可以访问Cookie的路径。默认情况下，Cookie的路径属性设置为创建Cookie的页面的路径。过期时间（Expires/Max-Age）
cookie和localstore和sessionstore区别
weixin_43416349的博客
10-03 3678
作为前段工程师，最近有一段面试被问到cookie、sessionStorage和localStorage的之间有什么区别？ 其实他们都是储存浏览器数据的，一个cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽，一个Web Storage浏览器数据，有分为localStorage和sessionStorage。 相同点： cookie、sessionStorage和localStorage都用在客户端存储数据，每一个都有自己的存储和到期限制 不同点： 一、存储大小 c
Web存储之localStore 与 sessionStore
weixin_34072637的博客
08-02 1824
参考资料： MDN-cookies介绍及其分类和安全隐患 阮老师的Javascript教程 Cookies： web存储是大多数网站应用都会拥有的功能，最常会用到的cookies用来存储用户令牌以达到身份验证的目的，这样用户可以持久地保持登录状态。因为HTTP是无状态的，服务端与客户端之间要请求必须开启连接，请求完毕之后又会关闭掉连接，所以需要cookies来记录用户相关的一些数据，以便服务端辨识...
localstore与sessionStore使用
weixin_33834075的博客
04-19 2619
说明 记录localstore在项目中的一些使用持续记录 个localstore加上过期时间 在现在web开发中,大量应用啦localstore,我们封装一个可以带过期功能的localstre这样，可以兼容cookie的使用，也可用了避免使用cookie /** * 数据使用localstore存储 */ export const ls = { //本地存数据，days 有效时间（天） ...
Localstore和sessionstore的全方位对比
最新发布
百锦再的博客
01-17 1万+
LocalStorage 和 SessionStorage 都是 HTML5 提供的本地存储机制，用于在客户端以键值对的形式保存数据。它们与传统的 Cookie 不同，不会随每次 HTTP 请求发送给服务器，因此更加高效。localStorage 和 sessionStorage 是前端开发中强大的存储工具，各有优缺点，关键在于选择正确的工具解决问题。在实际开发中，以下是一个简单的决策图：数据需要长期保存？是：选择 localStorage。否：选择 sessionStorage。
前端面试题必考（五）- Cookies 与 Session，SessionStore，LocalStore的区别及使用 / H5事件通知机制
王小鬼的博客
03-10 7831
一.Cookies 与 Session的区别及使用（参考：https://blog.csdn.net/liyifan687/article/details/80077928） HTTP是一种无状态的协议，不知道链接是谁发起的，所以需要浏览器把登录信息存起来，Session和Cookie就是为解决这个问题而提出来的两个机制。 1.Cookie是服务器在本地机器上存储的小段文本，并随每一个请求发送...
sessionStore使用
weixin_30685029的博客
06-20 2326
sessionStorage.setItem(key,value);//存值 value是字符串，如果想存入对象或数组，则必须进行序列化成Json字符串； sessionStorage.getItem(value);//取值 通过解析json字符串成javascript值 转载于:https://www.cnblogs.com/wly-laowang/p/11061421.ht...
session Storage
weixin_43726822的博客
05-04 9313
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。 WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。 1， 生命周期： session Storage(会话存储) : sessionStorage的生命周期是在仅在当前会话下有效。ses...
sessionstorage的使用、存储、读取、删除
CC酱写前端的博客
12-02 5397
概念： sessionStorage 是HTML5新增的一个会话存储对象， 用于临时保存同一窗口(或标签页)的数据（key/value）， 在关闭窗口或标签页之后将会删除这些数据。是window下的对象。 特点： 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型。 存储上限限制：不同的浏览器存储的上限也不一样，但
SessionStorage、LocalStorage、Cookie的比较
abcnull 的博客
10-10 1702
文章目录总述一.Session Storage二.Local Storage三.Cookie 总述 无论是 Session Storage 还是 Local Storage 亦或者是 Cookie 都是浏览器将特定接口返回的数据保存至本地，只不过这些存储有着或多或少的差异，Session Storage 作用于当前话术，浏览器生成的 Cookie 关闭浏览器默认失效，Local Storage 则...
cookie与session localstorage indexdb
01-04
### Web 存储方式对比 #### Cookie Cookie 是一种较早的浏览器存储技术，主要用于保持 HTTP 请求中的状态信息。其主要特点是： - 数据量较小，通常不超过 4KB； - 自动随请求发送给服务器，在每次HTTP请求中都会携带cookie数据[^1]。 ```javascript // 设置一个 cookie document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC"; ``` #### Session Storage Session Storage 提供了一种会话级别的存储解决方案，具有如下特性： - 数据只存在于当前会话期间，即当页面关闭后数据会被清除； - 同一域名下的多个标签页间不会共享 `sessionStorage` 中的数据； - 支持大约 5MB 的存储空间，具体取决于浏览器实现[^3]。 ```javascript // 使用 sessionStorage 进行简单操作 sessionStorage.setItem('key', 'value'); let value = sessionStorage.getItem('key'); sessionStorage.removeItem('key'); ``` #### Local Storage Local Storage 类似于 Session Storage，但提供了更持久化的存储方案： - 数据永久保存直到手动删除或通过编程手段移除； - 所有同源窗口之间可以共享 `localStorage` 内容； - 和 `sessionStorage` 接口一致，同样支持约 5MB 的容量限制。 ```javascript // 对 localStorage 进行基本操作 localStorage.setItem('name', 'Alice'); console.log(localStorage.getItem('name')); // 输出 Alice localStorage.clear(); // 清空所有项 ``` #### IndexedDB IndexedDB 则是一种更为复杂的数据库型存储机制，适用于大量结构化数据的操作： - 能够处理更大规模的数据集，并提供事务管理能力； - 不受简单的键值对约束，允许创建索引并执行查询语句； - 需要异步API来访问和修改其中的信息[^4]。 ```javascript const request = window.indexedDB.open("MyDatabase", 1); request.onupgradeneeded = function(event) { const db = event.target.result; let objectStore = db.createObjectStore("books", { keyPath: "isbn" }); }; request.onsuccess = function(event) { console.log("Database opened successfully"); }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值