使用localStorage而不是Cookies有什么缺点吗？

Question

在我以前的网站上，我曾经使用过cookie只在首次访问时显示一个主页。效果很好（see for example here），但今天使用cookies并不那么时髦，所以我想尽可能地避免使用它。

现在，我的新网站项目几乎总是通过javascript（显示模式框）预先推出，所以我不需要在服务器端执行任何操作。我正在考虑使用HTML5 localStorage而不是cookie，如果浏览器没有localStorage，则使用cookie备用。这是一个好主意吗？在可用性，隐私保护和网站性能方面有何影响？

使用localStorage可以提高已禁用Cookie的用户的可用性。但我知道有些HTML5功能只能在某些浏览器中选择加入（如地理定位）。在任何浏览器上都有像localStorage那样的限制吗？是否有任何情况下，如果localStorage可用但我的网站已停用，我将收到JS错误？

Answer 1

可用性

用户不知道您使用的是localStorage还是cookie。如果用户禁用cookie，localStorage也将无效。

效果

两种方法之间没有明显的速度差异。

的sessionStorage

sessionStorage仅适用于该浏览器标签的会话。如果关闭选项卡，会话将丢失，数据也将丢失，它类似于任何后端语言的会话变量。

localStorage的

localStorage可用于浏览器中的任何选项卡或窗口，并且在用户或程序删除之前一直存在。与Cookie不同，您无法设置到期日期。 localStorage也有更大的存储限制。

您的问题

1. 您没有使用此数据服务器端，因此您不需要cookie。与cookie不同，localStorage永远不会发送到服务器。
2. 如果用户禁用了cookie，则localStorage也将无效。

后备示例

您可以使用Modernizr验证localStorage是否可用，如果没有，请使用存储cookie代替。

if (Modernizr.localstorage) {
    // supports HTML5 Storage :D
} else {
    // does not support HTML5 Storage :(
}

您也可以放弃Modernizr并使用支票typeof Storage !== 'undefined'。

Answer 2

比较LS与cookies比较苹果与橙子。

Cookies和LS是完全不同的用途。 LS是一个工具，允许您的客户端（javascript代码）在本地存储其数据，而无需将其传输到服务器。 Cookie是客户端 - 服务器通信的工具。每个请求都要发送cookie的全部内容。

过去，cookie经常被滥用来模仿本地存储，因为它是javascript应用程序向客户端硬盘驱动器写入任何内容的唯一可能性。但通常LS不是cookie的替代品，因此如果您需要客户端和服务器都应该读写的东西，请使用cookie，而不是LS。

Answer 3

有一点要补充，与通常共享交叉协议的cookie不同，存储坚持同源策略。因此，站点共享相同的域，但托管在不同的协议上不共享存储的数据。

假设您的网站需要跨http和https工作。例如，当用户点击“购买链接”时，他们将登陆https安全结帐，然后结帐将无法检索以前存储在http网站上的数据，即使他们共享同一个域。

Answer 4

It doesn't look easy for the server to read the localStorage。这可能会派上用场，因为知道你的数据都是客户端的，这使得它可以安全地嗅探。

Cookie不能被覆盖，只能添加到并阅读：

alert(document.cookie);
document.cookie = "nope";
alert(document.cookie);