htm5笔记-web存储

最新推荐文章于 2025-08-15 21:07:05 发布

qq_30486009

最新推荐文章于 2025-08-15 21:07:05 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： html5 数据存储

本文链接：https://blog.youkuaiyun.com/qq_30486009/article/details/49506833

javascript 专栏收录该内容

5 篇文章

订阅专栏

Web 存储

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

localStorage 方法

用户访问页面的次数进行计数

<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>

sessionStorage 方法

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

<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>

应用程序缓存

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存，请在文档的标签中包含 manifest 属性

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
1. CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2. NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
3. FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）