html5存储数据，替代cookie

最新推荐文章于 2023-04-23 23:15:00 发布

原创最新推荐文章于 2023-04-23 23:15:00 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#存储 #存储数据 #记住密码

HTML5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML5中用于客户端数据存储的两种方法：localStorage和sessionStorage。localStorage为持久性存储，即使关闭浏览器后数据仍保留；sessionStorage则针对单一会话期，数据会在浏览器关闭时清除。文章通过实例演示了如何使用这两种存储方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常很多情况下我们都要用到数据的存储，而什么是数据存储？

数据存储是数据流在加工过程中产生的临时文件或加工过程中需要查找的信息。数据以某种格式记录在计算机内部或外部存储介质上。

通常用到的有这些：记住密码、浏览记录等

HTML5 提供了两种在客户端存储数据的新方法： //两种方法用刷新去测试是一样的结果，但是关闭浏览器再打开就不一样了

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

localStorage 方法（无论多久访问都存储着，下面是创建和访问localStrorage方法）：

localStorage.name="lili";

document.write("localStorage.name");

</script> //结果是弹出lili

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script>

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>

</body>
</html>

sessionStorage 方法:

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script>

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

</body>
</html>