前端本地存储sessionStorage和localStorage

最新推荐文章于 2024-02-19 15:48:02 发布
最新推荐文章于 2024-02-19 15:48:02 发布
阅读量275 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56026268/article/details/124469072
版权
本文详细介绍了浏览器的两种本地存储方式：sessionStorage和localStorage。sessionStorage用于临时存储同一窗口的数据，关闭浏览器窗口后数据消失；而localStorage则提供持久化的存储，即使关闭浏览器数据依然存在，且可在同源的多个窗口间共享。两者都以键值对形式存储数据，支持存储、获取、删除和清除操作。在使用时需要注意它们的生命周期和数据共享范围。
摘要由CSDN通过智能技术生成

window.sessionStorage

1.生命周期为关闭浏览器窗口

2.在同一个窗口下数据可以共享

3.以键值对的形式存储

用法:

存储数据   sessionStorage.setItem(key, val)

获取数据 sessionStorage.getItem(key)

删除数据 sessionStorage.removeItem(key)

清楚所有数据 sessionStorage.clear(）//会清除页面中所有数据，慎用

window.localStorage

1.生命周期永久生效,除非手动删除否则关闭页面也会生效

2.可以多窗口(页面)共享(同一浏览器可以共享)

3.以键值对的形式存储使用

用法

存储数据 localStorage.setItem(key, val)

获取数据 localStorage.getItem(key)

删除数据 localStorage.removeItem(key)

清楚所有数据 localStorage.clear(）//

Tj,나 갔어
关注
本地存储之sessionStorage与localStorage
shhghvvh的博客
12-06 648
目录1.本地存储的特性2.本地存储之sessionStorage(临时存储)2.1特点2.2使用方法2.2.1存储数据2.2.2获取数据 2.2.3删除数据2.2.4清空所有数据3.本地存储之localStorage(局部存储器) 3.1特点3.2使用方法3.2.1存储数据3.2.2获取数据3.2.3删除数据3.2.4清空所有数据1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3.容量较大，sessionStorage约5M、localStorage约20M4.只能存储字符串，可以将对象
H5API：本地储存 sessionStorage和localStorage
YYQingJs的博客
07-23 191
H5API：本地储存 sessionStorage和localStorage
使用JS获取SessionStorage的值
10-18
给大家介绍了使用js获取sessionstorage中的值，首先获取它是为了将获得的信息输出或者alert（),其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样，具体内容详情大家参考下本
前端中SessionStorage & Localstorage
qq_45515182的博客
08-16 2006
SessionStorage、LocalStorage介绍
前端存储之sessionStorage和localStorage
study_way的博客
07-29 2037
sessionStorage是一种用于web浏览器中临时保存数据的客户端存储机制。它允许在同一个浏览器窗口的会话期间，保存和访问临时数据，而这些数据在用户关闭窗口或者标签页会被清除。
前端学习（978）：本地存储之sessionStorage
歌谣的博客
04-27 212
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
前端数据的存储：cookie、sessionStorage、localStorage
qq_35315363的博客
06-01 810
前端数据的存储：cookie、sessionStorage、localStorage cookie：cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cooki...
sessionStorage和localStorage的区别
cx1361855155的博客
08-03 894
sessionStorage 和 localStoraged 的用法基本一致，sessionStorage和localStorage都具有相同的操作方法，列如setItem()，getltem()和removeItem()等，引用类型的值要转换成JSON。sessionStorage和localStorage：不会自动把数据发送给服务器，仅在客户端中保存，不参加服务器通讯。localStorage：本地存储只能通过手动清除，否则会一直保存。获取指定的key本地存储的值。删除指定的key本地存储的值。...
cookie、sessionStorage和localStorage的区别
aliyun3的博客
04-25 1424
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（
sessionStorage 和 localStorage 的使用
热门推荐
webchang的博客
02-19 1万+
sessionStorage 和 localStorage的属性和方法，事件的触发
前端sessionStorage的存取
m0_48660016的博客
04-16 763
sessionStorage.setItem("loginUser", JSON.stringify(datas.loginUser)); this.loginUser = eval('(' + sessionStorage.getItem("loginUser") + ')');
js-前端存储之sessionStorage
2301_76671906的博客
02-19 1183
sessionStorage是 Web Storage API 提供的一种客户端存储机制，用于在浏览器中保存会话级别（session-level）的数据。与localStorage不同，sessionStorage中存储的数据在用户关闭标签页或浏览器窗口时会被清除。
WEB前端存储技术(cookie/localStorage/sessionStorage/IndexedDB)
hunter_97的博客
01-28 304
目前前端存储数据常用的是Cookie、Storage、IndexedDB三种技术。下面将对这三个技术进行简述。 cookie、localStorage、sessionStorage、IndexedDB 之间的区别 cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给...
前端数据存储系列（Cookie、Session、localStorage、sessionStorage、Token）
m0_52711377的博客
10-28 3289
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，实际上Cookie是服务器在本地机器上存储的一小段文本，并随着每次请求发送到服务器。Cookie会根据响应报文里的一个叫做Set-Cookie的首部字段信息，通知客户端保存Cookie。当下客户端再向服务端发起请求时，客户端会自动在请求报文中加入Cookie值之后发送出去保存时间：默认情况下，当浏览器关闭后，Cookie数据被销毁持久化存储：正数：将Cookie数据写到硬盘的文件中。持久化存储。
前端sessionStorage存储理解，登录信息存储
Baby_加油_的博客
08-11 4479
sessionStorage概念 浏览器窗口，sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。 sessionStorage多个标签页数据是否会共享问题 刷新当前页面，或者通过location.href、window.open、或者通过带target="_blan
前端暂时存放数据localStorage、sessionStorage
weixin_48860638的博客
11-08 856
设置数据 localStorage.setItem(key,value); 获取单个数据 localStorage.getItem(key); 获取所有数据 localStorage.valueOf(); 示例（逐行执行） sessionStorage.setItem('1',new Date().getHours()+'-'+new Date().getMinutes()+'-'+new Date().getSeconds()); sessionStorage.setItem('2',new Dat
前端网页sessionStorage对值的获取与传值
WACBG的博客
05-01 2505
sessionStorage主要在页面之间进行值得传输·允许跨页面。 可以是单个值，以及JSON对象的传递， 主要方法有这些 sessionStorage[key]=val//保存一个数据 sessionStorage.setItem(key,val)// 保存一个数据 var val=sessionStorage[key]//读取一个数据 var val-sessionStorage.getI...
【开发记录】之 sessionStorage的存储和获取
weixin_45438028的博客
07-01 1746
关于sessionStorage的相关总结
JavaScript 学习-49.localStorage前端保存数据
qq_27371025的博客
10-09 1092
localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage 存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
cookie和token和sessionStorage和localStorage的区别
最新发布
06-07
Cookie、Token和 sessionStorage 和 localStorage 都是浏览器中用于存储数据的机制，但它们在用途、生命周期和数据大小等方面有所不同： 1. **Cookie**: - **用途**: Cookie 主要用于跟踪用户身份和设置，比如网站登录状态或用户的首选项。它们通常发送到服务器，服务器会回传一个带有特定域限制的标识。 - **生命周期**: 客户端控制，有默认过期时间（一般为1-2周）或由开发者设定的max-age属性。每次页面刷新都会发送给服务器。 - **大小限制**: 早期的限制通常较小，现在最大可达4KB，具体取决于浏览器配置。 - **安全性**: 容易被劫持，因为可以通过浏览器的cookies.txt文件查看。 2. **Token (通常指JWT)**: - **用途**: JWT（JSON Web Token）主要用于跨域身份验证，包含用户信息，服务器验证后返回给客户端，客户端在每个请求头中附带此令牌。 - **生命周期**: 可以设置为长或短，可包含自签发到过期的详细信息，也可以通过服务器进行刷新。 - **存储位置**: 常见的是在HTTP头部，不是浏览器存储，但有时前端也会存储为局部存储。 - **安全性**: 加密和签名确保了令牌的安全性，但同样可能因拦截而暴露。 3. **sessionStorage**: - **用途**: 仅在当前会话期间有效，存储的数据是私有的，不会发送到服务器，适用于临时保存用户交互信息。 - **生命周期**: 直到浏览器窗口关闭或刷新页面时失效。 - **数据大小**: 比localStorage大，一般限制在5MB左右，但不同浏览器可能有差异。 - **跨域限制**: 同源策略限制，不能跨域访问。 4. **localStorage**: - **用途**: 存储长期数据，如用户的设置或首选项，生命周期长，直到用户清除浏览器数据。 - **生命周期**: 没有明确的过期日期，除非手动删除或达到存储限制。 - **数据大小**: 较大，通常超过5MB，但同样受浏览器配置影响。 - **跨域限制**: 同样受限于同源策略，且同源情况下才能读取。 相关问题： 1. 如何根据数据的敏感性和使用场景选择合适的存储方式？ 2. 当用户关闭浏览器后，sessionStorage和localStorage的数据处理方式有何不同？ 3. 使用Cookie时，如何设置一个自定义过期时间？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值