关于localStorage和sessionStorage的一些注意点

最新推荐文章于 2024-05-23 10:06:41 发布
最新推荐文章于 2024-05-23 10:06:41 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： localStorage sessionStorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjc256/article/details/88789196
版权

文章目录

超出存储容量时会抛出异常

localStorage和sessionStorage是有存储容量限制的，在localStorage和sessionStorage的异同中有提到。

一旦超出容量限制便会抛出QuotaExceededError的错误。所以在使用Storage的时候最好加上try catch。

存储类型只能为字符串

也就是说，存储其他的类型便会调用其toString方法。例如，布尔值false存入Storage再取出便是字符串"false"。同理，undefined和null也都会被转换成相应的字符串。这在开发中要格外小心，因为以上这些字符串在进行布尔判断的时候可都是为真的。

如果想要存储对象也不是不可以，只需要使用JSON.stringify方法将对象转换为JSON字符串即可。使用时，再使用JSON.parse方法将JSON字符串转换回对象。

sessionStorage的失效机制

  • sessionStorage在页面刷新时并不会被失效。
  • 相同URL的不同标签页之间不能共享sessionStorage
Meskjei
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用sessionStorage得一个坑
banaigong1234的博客
12-26 648
1.首先sessionStorage.setItem("isMybill" false) 2.使用的时候 sessionStorage.getItem('isMybill') //打印输出是 字符串 : "false" 3.所以在使用之前把 JSON.perse(sessionStorage.getItem('isMybill')) 转换成 json对象 :false ...
本地存储localStorage和sessionStorage
07-30 272
cookie劣势： 存储大小限制，4kb 单域名下有数量限制，50个左右 污染请求头，浪费流量 本地存储web storage 包括localStorage和sessionStorage localStorage 本身是一个对象，可以打印查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage<...
Failed to execute ‘setltem‘ on ‘Storage‘: Setting the value of ‘sessionObj exceeded the quota
最新发布
baidu_39362621的博客
05-23 345
2、500KB左右的东西保存起来就会令到Resources变卡。3、 2M左右就可以令到Resources卡死，操作不了。1、sessionStorage对大小是有限制的。4、5M就到了Chrome的极限。解决方法，方便日后查看。
cookie，sessionStorage 和 localStorage 的区别 cookie弊端
前端开发小白9527
08-18 231
区别 cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存 存储大小： cookie数据大小不能超过4k sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 有期时间： localSto
客户端存储sessionStorage、localStorage详解
火星基地
05-17 632
1. Web Storage 简介 Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。 Web Storage 的第 2 版定义了两个对象：localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。 这两者的主要区别是： sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭。存储在sessionStorage中的数据不受页面刷新影响，可以在
学习了前端才知道SessionStorage和localStorage是怎样存储数据的
似水流年，是谁苍白了等待
01-16 2027
前言 之前一直好奇我们在进浏览器的时候会一些数据会留下记录，当我们好像浏览器有记忆功能，很懵，不知道什么原理，当我们进这个页面对页面新完数据还在，感觉很神奇，最近通过实践终于有了自己的理解，与君共勉，大佬勿喷。 假如作为一个前端人员的话，就必须对一些主流的浏览器以及他各自的兼容性有一定的了解，更要知道浏览器的特性，知道浏览器怎样存储数据，怎样释放数据。这里通过localStorage和sess...
localstorage和sessionstorage使用记录(推荐)
09-27
在使用`localStorage`和`sessionStorage`时，应注意以下几点： - 键（key）必须是字符串类型，否则浏览器会将值作为键处理。 - 值（value）可以是任何类型，但在存储时会被转换为字符串，因此需要考虑类型转换的问题...
cookie，localStorage,sessionStorage区别与应用
01-07
sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息，只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭，数据清空 存在内存中，除非自己删除 浏览器关闭，...
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
store:使用localStorage和sessionStorage的更好方法
05-11
一种功能丰富且友好的方式，可以利用localStorage和sessionStorage（JSON，命名空间，扩展等）。 下载： 或 ： npm install store2 ： Install-Package store2文献资料主要存储功能可以直接处理set ， get ， ...
详解Vue中localstorage和sessionstorage的使用
08-28
但是，在实际项目中，直接使用 localstorage 和 sessionstorage 可能会带来一些问题，如耦合度太高、存储空间的浪费、全局污染等。 1. 项目使用中暴露出来的几个问题 在项目中，直接使用 localstorage 和 ...
限制保存html,如何阻止sessionStorage在达到限制后保存值
weixin_39953356的博客
06-30 230
我一直在试图弄清楚如何在点击Add Another Worker按钮时达到max_fields后停止sessionStorage保存值？似乎达到极限后，再次点击按钮，值不断增加到sessionStorage我想知道如何阻止这种情况发生。如何阻止sessionStorage在达到限制后保存值HTML链接Select a TitleBossWorkerManagerAdd Another Worker...
JAVA Web应用常见漏洞与修复建议_基于dom的xss是将用户可控的javascript数据输出到html页面中而产生的漏洞,为了避
2401_84969054的博客
05-17 430
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数网络安全工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。[外链图片转存中…(img-xRVOqBcz-1715881670315)]
浏览器存储
SongGLing的博客
08-01 2034
Cookie 的劣势 存储大小限制，仅 4kb 左右单个域名下的数量限制，50个左右污染请求头，浪费流量 本地存储 - Web Storage ❝ localStorage 和 sessionStorage 区别 相同的使用方法不同的存储时效不同的储存容量 ❞ 不同的存储时效 localStorage 存储会持久化（没有储存时间）sessionStorage 存储会在网页会话结束后失效，刷新没有问题 不同的储存容量 localStorage 容量一般在 2~5Mb 左右sessionStorage
如何做前端缓存，防止内存溢出，npm-storage短小精悍的前端缓存插件
吹过麦田的风的专栏
07-27 2400
一，先介绍一下前端常用的几种缓存 1.Cookie cookie是比较老的前端缓存技术了，它的特点是想要使用它前端必须要有服务（静态网页是不行的），而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢？因为只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送，而且由于浏览器的跨域限制，客户端和服务端必须要保证同源的原则（也就是跨域问题，详情见我的其他文章）...
浏览器缓存机制(四)——sessionStorage和localStorage
热门推荐
zhoujie_zhoujie的博客
02-24 1万+
一.Web StorageWeb Storage是HTML5提出的本地存储机制，主要目的是克服cookie的一些限制，当数据需要被严格控制在客户端上时，无需持续的将数据发回服务器。优点： 大量数据的存储（也有限制，因浏览器而异，每个来源2.5M/5M） 数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。 跨会话 缺陷: 因为WebStorag
cookie localStorage 与 sessionStorage的优缺点
surprise_bao的博客
03-13 2958
cookie localStorage 与 sessionStorage的优缺点 cookie 缺点：cookie限制大小 ​ cookie会每次随http请求一起发送，浪费宽带。 localStorage 特点；可以长期储存数据；需要手动删除数据 ​ 在同一域下且同一个浏览器不同窗口页面，操作的是同一 个localStorage 优点：可以大量保存浏...
localStorage使用时的注意点
sjw1039115768的博客
06-17 8004
一、localStorage，sessionStorage，cookie的简单介绍localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除cookie:客户端存储，参与服务器通信，存储大...
localStroge 存储布尔值的问题
大脸猫~
08-19 5834
localStroge 存储布尔值在使用的u欧城中遇到了很多问题，后来才发现，存进去的布尔值，取出来全变成了字符串。。。。。。。 自然在使用的时候出现了一堆bug 事实上，不止是布尔值，其他类型的值也全变成字符串类型 localStroge注意事项 在项目中，我们就是要使用布尔值怎么办，我们要将得到的数据进行处理。 两种情况，通常布尔值我们会存储true和false，这样我们得到的就是“...
localstorage和sessionstorage cookie区别
08-23
localstorage、sessionstorage和cookie都是用来存储数据的，但它们之间有以下区别： 1. 存储容量：cookie的存储容量最小，只有4KB，而localstorage和sessionstorage的存储容量可以达到5MB。 2. 存储位置：cookie的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值