H5本地存储LocalStorage缺点

最新推荐文章于 2025-05-25 10:22:07 发布
最新推荐文章于 2025-05-25 10:22:07 发布
阅读量4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xz_src/article/details/73380568
本文探讨了localStorage的大小限制、在隐私模式下的不可读性、其读写机制可能导致的性能问题及为何不适合完全替代URL传参的原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


localStorage大小限制在500万字符左右，各个浏览器不一致
localStorage在隐私模式下不可读取
localStorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
localStorage不能被爬虫爬取，不要用它完全取代URL传参

58-JS-本的存储cookie，h5本地存储localStorage，sessionStorage，继承,onstorage
qq_47462646的博客
01-31 171
(每一个对象都有一个内部属性__proto__属性，属性的值可以是一个对象，也可以是null，如果他的值是一个对象，则这个对象也一定有自己的原型，这样就形成了一条线性的链，我们称之为原型链)1.4.1在写入一条和之前一样名的cookie，覆盖掉原有的，把失效时间设置为昨天 让新写入的达到失效的效果，最后看起来和删除的。3.1原型链继承，子类可以拿到父类原型当中的东西（缺点无法传参）3.2构造函数继承（可以传参，无法借用原型身上的东西）1.4​删除cookie​​​​​​。子类的原型==父类的实例。
HTML5 Web应用本地存储技术详解：localStorage、sessionStorage 与 IndexedDB
Allen-
11-28 1866
HTML5本地存储是一种允许Web应用程序在用户浏览器端本地保存数据的技术，无需依赖服务器。它增强了Web应用的离线功能、个性化设置保留以及性能优化。通过本地存储，开发者可以将关键信息、用户偏好、临时状态等数据安全地保留在用户的设备上，实现更快的加载速度、更好的用户体验以及部分离线功能。
localStorage优缺点
Jinjinjinx的博客
07-20 3171
localStorage 的优势和缺点。 1、localStorage 拓展了 cookie 的 4K 限制。 2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。 localStorage 的局限 1、浏览器的大小不统一，并且在 IE8 以上的 I...
localStorage的优势与局限分析！
勇敢牛牛
12-08 1959
LocalStorage 存储限制突破：5MB 扩容方案
最新发布
小白菜的博客
05-25 1180
当你在浏览器中开发一个「离线笔记应用」，用户需要存储 1000 篇长文；或是做一个「本地缓存电商平台」，需要保存 5000 张商品缩略图时，你会发现：浏览器默认的 LocalStorage 只能存 5MB 数据——这相当于只能存 1000 篇 5KB 的短文（约 2500 字/篇），或 100 张 50KB 的图片。本文将围绕「如何突破 LocalStorage 5MB 限制」展开，覆盖原理分析、主流方案、实战代码和场景建议，帮助开发者解决大存储需求。
html5本地缓存的缺点,前端几种本地缓存机制
weixin_34036075的博客
06-25 286
2. Session说到Cookie就不能不说Session。Session机制。session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id)，如果已包含则说明以前已经为此客户端创建过session，服务...
localstorage存储大小_localstroage过多存储满的情况下应该怎么办？
weixin_39820588的博客
11-21 6211
技术很简单，业务很麻烦在大公司，同一个域名下可能存在几十上百条业务线，每条业务线都可能因为各种理由往 localStorage 里塞东西，跨页面传数据啦、缓存啦、离线化啦、性能优化啦...，5M 看起来很多，其实很快就用完了。而开发时基本无感知，是因为大家都只访问自己的业务，但用户会访问各种业务，时间一久，很容易就存满了，凡是严重依赖 localStorage 的业务流程都存在风险，写可能出问题，...
H5的localStorage使用总结
weixin_30877493的博客
01-13 269
一、localstorage 的优缺点 　　优点： 　　　　1、localStorage 的存储大小是5M,而cookie的存储大小只有4K，解决了cookie存储空间不足的问题 　　　　2、localStorage 可以将第一次请求的数据直接存储到本地，相当于是一个针对前端而言的5M的数据库，相比于cookie可以节约带宽 　　缺点： 　　　　1、浏览器的大小不统一，并且在IE8以上版...
h5新特性localstorage的简单应用（记住登录名和密码）
szl199107101035的博客
09-08 6581
我们在制作登录界面的时候回出现一个勾选框，询问我们是否记住账号和密码，当我们勾选了之后下次进来就是上次登录的账号密码，可以直接登录。那这个功能是如何实现的呢？下面我们就是用h5的新特性localstorage来实现。  首先，我们需要了解下localstorage的含义和用法。在客户端h5提供了两种存储方式；一种是localstorage，一种是sessionstorage         下
关于H5应用乱用localStorage引发的血案
Android技术之家
07-22 576
本次记录一个关于用H5开发的webAPP 在Android客户端使用webview加载的问题，由于webapp使用localStorage存储了大量的表单信息，导致使用频繁的用户在该目录下存储的数据越来越多直到上限，localStorage的容量上限是5M，达到上限后H5程序就崩溃了，显示白屏，这问题又不容易复现，大多数用户达不到上限，使用是没问题的，出问题的手机又不在身边，经过一天的...
5个HTML5的常用本地存储方式详解与介绍
10-15
开发者可以根据应用场景的需要选择最适合的本地存储方式，如需要长期存储大量数据时使用localStorage或IndexedDB；需要离线浏览能力时使用application cache；仅需要会话级别的数据存储时使用sessionStorage等。每种...
解决localstorage容量大导致页面加载变慢
weixin_46175018的博客
09-06 1627
项目场景： 提示：性能优化之localstorage的大容量导致加载变慢： 例如：我负责一个项目，原先的数百条数据是存储在localstorage里面，但是localstorage容量标准是5MB 问题描述： 问题：我负责的项目localstorage存储的数据量太大，高达200+条。而且每条数据很长，所以每次页面加载/更新慢的让人受不了 原因分析： 原因：localstorage容量标准是5MB，我负责的项目原先的存储在localstorage的数据量太大，导致性能低下。 解决方案： 我的解决方案是：
本地存储方式比较
Yuan_Laoda的专栏
08-02 1678
由于最近有项工作要用到本地存储
JQuery和JS操作LocalStorage/SessionStorage的方法
一碗单炒饭的专栏
02-26 5万+
首先说一下LocalStorage和SessionStorageLocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右，各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存） 不能被爬虫爬取，不要用它完全取代URL传参 IE７及以下不支持外，其他标准浏览器都完全支持
H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
热门推荐
林洪炳的日常技术积累
01-09 6万+
H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。 一、Web Storage教程 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web
localStorage使用时的注意点
sjw1039115768的博客
06-17 8119
一、localStorage，sessionStorage，cookie的简单介绍localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除cookie:客户端存储，参与服务器通信，存储大...
关于localStorage存储、读取、清除数据以及与sessionStorage的区别问题
upStar1的博客
02-21 4673
1.localStorage存储 window.localStorage.setItem('key',value) 但有时value为一个对象Object，以上面的方式写入，会出现读取的返回值为{object Object}的情况，但这并不是我们想要的，此时我们需要使用JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储 window.localStorage.setItem('param',JSON.stringify(Object)) 例： loc
H5的浏览器本地存储localStorage在IE中的坑
zhangxuekang的博客
04-05 1万+
    最近在做一个web日历，有增加提醒的功能，因为没有后台，所以需要动用浏览器的本地存储，存提醒信息。在Chrome中运行正常的localStorage在IE中死活读不到了。可是明明在IE8的时候，IE就开始支持localStorage了，我的IE11竟然不认了。    各方查找，问题出在代码运行环境上了！要想localStorage在IE中有效，必须在服务器环境才行。    最后说一句，珍爱...
购物app订单参数转H5
12-31
### 实现购物APP订单参数传递至H5页面 为了实现从购物应用程序将订单参数传递到H5页面，在实际项目中通常有几种方法可以考虑： #### 方法一：URL 参数传递 一种简单有效的方式是通过 URL 查询字符串的形式把必要的订单信息作为参数附加在 H5 页面链接后面。这种方式适用于需要快速分享或跳转场景。 ```javascript // 构建带有订单ID和其他必要信息的URL const orderId = '12345'; const orderAmount = '99.00'; let h5Url = `https://example.com/order?orderId=${encodeURIComponent(orderId)}&amount=${encodeURIComponent(orderAmount)}`; window.location.href = h5Url; ``` 这种方法的优点在于易于理解和实施，缺点则是暴露了部分敏感信息于浏览器地址栏中[^1]。 #### 方法二：Local Storage 或 Session Storage 如果是在同一个域下，则可以通过 LocalStorage 或者 sessionStorage 来存储临时性的订单数据，并让目标网页读取这些数据完成初始化工作。 ```javascript // APP端保存订单详情到本地缓存 localStorage.setItem('orderInfo', JSON.stringify({ id: '67890', total: 150 })); // H5页面加载时尝试恢复之前保存的数据 document.addEventListener('DOMContentLoaded', function() { let storedOrder = localStorage.getItem('orderInfo'); if(storedOrder){ console.log(JSON.parse(storedOrder)); } }); ``` 此方式适合用于跨页面间共享少量非敏感数据的情况[^2]。 #### 方法三：WebView JavaScript Bridge 对于更复杂的需求，特别是涉及到安全性较高的场合，推荐使用 WebView 的 JSBridge 技术来进行双向通讯。这允许移动应用与嵌入其中的 Web 应用程序之间安全地交换消息和服务调用。 ```objc #import "WebViewJavascriptBridge.h" // iOS 客户端设置桥梁并监听来自Web的消息 - (void)viewDidLoad { [super viewDidLoad]; self.webView.delegate = self; _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"Received message from webview: %@",data); // 处理接收到的信息... NSString *responseString = @"Handled"; responseCallback(responseString); }]; } // 向web发送订单对象 [_bridge send:@{@"type":@"submitOrder",@"content":@{...}}]; // 在HTML文件里定义相应的接收函数 <script type="text/javascript"> function setupWebViewJavascriptBridge(callback) { if(window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } document.addEventListener('WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge); }, false); } setupWebViewJavascriptBridge(function(bridge) { /* 初始化完成后可注册回调 */ bridge.init(function(message,responseCallback){/* ... */}); // 接收到来自Native App的消息后执行相应动作 bridge.registerHandler('submitOrder', function(data, responseCallback) { alert("Got Order Data:" + JSON.stringify(data)); // 进一步处理订单逻辑... }); }); </script> ``` 这种机制提供了更高的灵活性和控制力，同时也更好地保护了传输过程中的隐私性和安全性[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值