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