[浏览器]LocalStorage

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

二、localStorage的优势与局限
localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

这里我们以localStorage来分析

Cookie和LocalStorage都提供了在客户端存储数据的能力,但它们在设计目的、功能和使用场景上有显著的不同。这些差异导致了即使有了Cookie,LocalStorage仍然非常有用。以下是几个关键点,解释为什么LocalStorage在存在Cookie的情况下仍然重要:

  1. 存储容量
  • Cookie的存储容量相对较小,通常每个域名限制在4KB左右。这使得Cookie不适合存储大量数据。
  • LocalStorage提供了更大的存储空间,通常至少5MB。这让它成为存储较大数据集,如用户设置、应用状态等的理想选择。
  1. 生命周期
  • Cookie可以设置过期时间,过期后会自动删除。这对于实现如会话管理等功能非常有用。
  • LocalStorage数据没有过期时间,数据会一直存在直到被明确删除,或者用户清除浏览器数据。这使得LocalStorage适合长期存储。
  1. 服务器交互
  • Cookie随每个HTTP请求自动发送到服务器,这对于进行身份验证或跟踪用户会话很有用,但可能增加不必要的网络负载。
  • LocalStorage仅在客户端存储,不随HTTP请求发送到服务器,减少了网络流量并提高了性能,特别是在不需要服务器知道存储内容的情况下。
  1. 安全性
  • Cookie支持设置为HttpOnly,可以减少XSS攻击的风险,但如果不当使用,仍可能受到CSRF攻击。
  • LocalStorage较容易受到XSS攻击,因为存储的数据可以通过客户端脚本访问,但它不涉及HTTP请求,因此不受CSRF攻击的影响。
  1. API和使用简易性
  • LocalStorage提供了一个简单易用的API,使得在客户端存储和访问数据变得更加方便。相比之下,Cookie的API相对原始,处理起来可能更复杂。

总的来说,LocalStorage提供了一种在客户端存储大量数据、不随每个请求发送到服务器、并且容易使用的解决方案。这些特性使得它成为Cookie的重要补充,特别是在处理大量不需要服务器知道的客户端数据时。尽管如此,开发者在使用这些技术时应该注意它们的安全性和性能影响。

作者:Esofar

出处:https://www.cnblogs.com/DCFV/p/18287609

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   Duancf  阅读(53)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
more_horiz
keyboard_arrow_up light_mode palette
选择主题
点击右上角即可分享
微信分享提示