HTML5 网络存储与 Cookie

Posted 2023-02-24

【中文标题】HTML5 网络存储与 Cookie

【英文标题】：HTML5 Web Storage vs Cookies

【发布时间】：2012-05-18 11:39:08

【问题描述】：

我想向我网站上特定页面的首次访问者显示一条消息。该消息只需要出现一次。

使用 cookie 会很简单，但使用 html5 localStorage 是否有更多好处？如果有，将如何实施？

【参考方案1】：

HTML5 localStorage 实现起来会容易得多，它不需要这么多行，而且实现起来非常简单。这是一个例子：http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_webstorage_local_clickcount 此处描述的另一个选项是 cookie。 Cookie 是一种广泛使用的解决方案，但它需要更多的行来编写 cookie，但正如上面提到的那样，优点是 cookie 在许多旧浏览器中都被使用。以下是 cookie 的示例： http://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

展望未来，考虑到 OP 和浏览器都在发生巨大变化，现在越来越多的浏览器必须支持 HTML5，我会考虑 localStorage

【讨论】：

我实际上是在移动环境中使用它，所以这是我考虑使用本地存储的原因之一。谢谢！

【参考方案2】：

localstorage 将在用户计算机上保存最多 5 MB 的数据，唯一不好的是存储永远存在，如果您需要过期，则需要这样做，cookie 会自动处理。

使用本地存储的示例：

var 访问次数 = parseInt(localStorage["numVisits"]);

var el = document.getElementById("cookieData");

if (isNaN(visits)) 
    visits = 1;
    el.innerHTML = "Welcome to the site!";
 else 
    visits += 1;
    el.innerHTML = "Welcome back! You've been here " + visits + " times.";


localStorage["numVisits"] = visits;

【参考方案3】：

即兴发挥，我可能会推荐 cookie，但这取决于您的用户使用的浏览器以及您希望如何呈现您的消息。

Cookie 更适合更广泛的受众，因为所有浏览器都支持它们。 IE 6 和 7 等较旧的浏览器不支持本地存储。 Cookies 也可以在服务器端进行操作。因此，如果您要显示的消息是在服务器端呈现的，那么 cookie 可能是更好的选择。

通过 javascript 访问本地存储稍微容易一些，但使用它并没有太多优势。

【参考方案4】：

根据您的描述，仅使用 cookie 几乎更容易且更不容易出错。并非所有浏览器都具有相同的 HTML localStorage 实现，尤其是 IE 7+8。但是，它们都使用 cookie，不会出现跨浏览器兼容性问题。

查看此 SO 了解更多信息：Local Storage, Session storage, Web storage, web database and cookies in HTML5