我想通过将所有cookie移动到本地存储来减少我网站上的加载时间,因为它们似乎具有相同的功能。除了明显的兼容性问题外,使用本地存储替代cookie功能有什么利与弊(尤其是性能方面)吗?
当前回答
值得一提的是,当用户在某些版本的移动Safari中以“私有”模式浏览时,localStorage不能被使用。
引自视窗MDN专题的WayBack档案。2018年的localStorage:
注意:从iOS 5.1开始,Safari Mobile将localStorage数据存储在缓存文件夹中,在操作系统的要求下,通常在空间不足的情况下,会偶尔清理缓存文件夹。Safari Mobile的私密浏览模式也完全阻止了对localStorage的写入。
其他回答
关键的不同点:
容量:
本地存储:10MB 饼干:4 kb
浏览器支持:
本地存储:HTML5 Cookies: HTML4, HTML5
存储位置:
本地存储:仅限浏览器 cookie:浏览器和服务器
随请求发送:
本地存储:是 饼干:不
访问:
本地存储:任何窗口 Cookies:任何窗口。
到期日期:
本地存储:永不过期,直到javascript完成。 cookie:有,有有效期。
注意:使用它,适合你的。
本地存储速度很大程度上取决于客户端使用的浏览器以及操作系统。mac上的Chrome或Safari可能比PC上的Firefox快得多,尤其是使用了更新的api后。和往常一样,测试是你的朋友(我找不到任何基准测试)。
我真的没有看到cookie和本地存储有很大的区别。此外,你应该更担心兼容性问题:不是所有的浏览器都开始支持新的HTML5 api,所以cookie将是你在速度和兼容性方面的最佳选择。
饼干:
可以通过JavaScript访问,所以Cookie的数据可以被XSS窃取 攻击(跨站点脚本攻击),但设置HttpOnly标志 Cookie阻止JavaScript访问Cookie的数据 保护免受XSS攻击。 是易受CSRF(跨站点请求伪造),但设置 带Lax到Cookie的SameSite标志可以缓解CSRF,而设置带Strict到Cookie的SameSite标志可以防止CSRF CSRF。 必须有到期日,所以当到期日过后,Cookie是 自动删除,所以即使你忘记删除Cookie, Cookie因过期而自动删除。 通常大小约为4KB(取决于浏览器)。
本地存储:
通过JavaScript访问本地存储的数据可以被XSS窃取 攻击(跨站脚本攻击),那么,根据我的研究, 对于本地存储的XSS没有简单的预防措施 攻击。 不容易受到CSRF(跨站点请求伪造)的攻击。 没有过期日期,因此如果您忘记删除本地存储 数据,本地存储数据可以永久保存。 一般大小约为5MB(取决于浏览器)。
我建议敏感数据使用Cookie,非敏感数据使用本地存储。
值得一提的是,当用户在某些版本的移动Safari中以“私有”模式浏览时,localStorage不能被使用。
引自视窗MDN专题的WayBack档案。2018年的localStorage:
注意:从iOS 5.1开始,Safari Mobile将localStorage数据存储在缓存文件夹中,在操作系统的要求下,通常在空间不足的情况下,会偶尔清理缓存文件夹。Safari Mobile的私密浏览模式也完全阻止了对localStorage的写入。
cookie和本地存储有不同的用途。cookie主要用于读取服务器端,本地存储只能由客户端读取。所以问题是,在你的应用程序中,谁需要这些数据——客户端还是服务器?
如果它是你的客户端(JavaScript),那么无论如何都要切换。在每个HTTP报头中发送所有数据是在浪费带宽。
如果它是您的服务器,本地存储就不是那么有用了,因为您必须以某种方式(使用Ajax或隐藏表单字段或其他东西)转发数据。如果服务器对每个请求只需要总数据的一小部分,那么这样做是可以的。
不管怎样,您都希望将会话cookie保留为cookie。
根据技术上的差异,以及我的理解:
除了作为一种古老的保存数据的方式,cookie给你一个4096字节的限制(实际上是4095字节)-这是每个cookie。本地存储每个域高达10MB -这个堆栈溢出问题也提到了它。 localStorage是存储接口的实现。它存储的数据没有过期日期,只通过JavaScript或清除浏览器缓存/本地存储的数据-不像cookie过期。
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?