我想通过将所有cookie移动到本地存储来减少我网站上的加载时间,因为它们似乎具有相同的功能。除了明显的兼容性问题外,使用本地存储替代cookie功能有什么利与弊(尤其是性能方面)吗?
当前回答
值得一提的是,当用户在某些版本的移动Safari中以“私有”模式浏览时,localStorage不能被使用。
引自视窗MDN专题的WayBack档案。2018年的localStorage:
注意:从iOS 5.1开始,Safari Mobile将localStorage数据存储在缓存文件夹中,在操作系统的要求下,通常在空间不足的情况下,会偶尔清理缓存文件夹。Safari Mobile的私密浏览模式也完全阻止了对localStorage的写入。
其他回答
使用localStorage, web应用程序可以在用户的浏览器中本地存储数据。在HTML5出现之前,应用程序数据必须存储在cookie中,包含在每个服务器请求中。大量数据可以存储在本地,不影响网站性能。虽然localStorage更现代,但这两种技术都有一些优点和缺点。
饼干
Pros
遗留支持(它一直存在) 持久数据 到期日期 cookie可以被标记为仅HTTPOnly,这可能会限制用户浏览器在会话期间的XSS攻击(不保证对XSS攻击完全免疫)。
Cons
每个域将其所有cookie存储在单个字符串中,这可以使 解析数据困难 数据未加密,这成为一个问题,因为... ...虽然 小的大小,cookie发送与每个HTTP请求限制大小 (4 kb)
本地存储
Pros
大多数现代浏览器支持 直接存储在浏览器中的持久数据 同源规则适用于本地存储数据 不是每个HTTP请求都发送吗 每个域约5MB的存储空间(即5120KB)
Cons
之前的任何版本都不支持:IE 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iOS 2.0, Android 2.0 如果服务器需要存储的客户端信息 发送它。
localStorage的使用几乎与会话的使用相同。它们有非常精确的方法,所以从session切换到localStorage真的很简单。但是,如果存储的数据对您的应用程序非常重要,您可能会使用cookie作为备份,以防localStorage不可用。如果你想检查浏览器对localStorage的支持,你所要做的就是运行这个简单的脚本:
/*
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
var test = 'test';
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch(e) {
return false;
}
}
/*
* execute Test and run our custom script
*/
if(lsTest()) {
// window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
window.localStorage.setItem(name, 1);
console.log('localStorage where used'); // log
} else {
document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
console.log('Cookie where used'); // log
}
"安全(SSL)页上的localStorage值是隔离的" 有人注意到,请记住localStorage将不会 可用,如果你从'http'切换到'https'安全协议,其中 cookie仍然可以访问。这很重要 如果您使用安全协议,请注意。
饼干:
在HTML5之前介绍。 有有效期。 通过JS或浏览器的“清除浏览数据”或过期日期清除。 将每个请求发送到服务器。 容量为4KB。 只有字符串可以存储在cookie中。 有两种类型的cookie:持久cookie和会话cookie。
本地存储:
由HTML5引入。 没有过期日期。 由JS或浏览器的“清除浏览数据”清除。 您可以选择何时必须将数据发送到服务器。 容量为5MB。 数据是无限存储的,必须是字符串。 只有一种。
值得一提的是,当用户在某些版本的移动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:有,有有效期。
注意:使用它,适合你的。
cookie和本地存储有不同的用途。cookie主要用于读取服务器端,本地存储只能由客户端读取。所以问题是,在你的应用程序中,谁需要这些数据——客户端还是服务器?
如果它是你的客户端(JavaScript),那么无论如何都要切换。在每个HTTP报头中发送所有数据是在浪费带宽。
如果它是您的服务器,本地存储就不是那么有用了,因为您必须以某种方式(使用Ajax或隐藏表单字段或其他东西)转发数据。如果服务器对每个请求只需要总数据的一小部分,那么这样做是可以的。
不管怎样,您都希望将会话cookie保留为cookie。
根据技术上的差异,以及我的理解:
除了作为一种古老的保存数据的方式,cookie给你一个4096字节的限制(实际上是4095字节)-这是每个cookie。本地存储每个域高达10MB -这个堆栈溢出问题也提到了它。 localStorage是存储接口的实现。它存储的数据没有过期日期,只通过JavaScript或清除浏览器缓存/本地存储的数据-不像cookie过期。