Javascript离线应用与客户端缓存

最新推荐文章于 2023-11-29 15:38:10 发布

joey无心快语

最新推荐文章于 2023-11-29 15:38:10 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 客户端缓存 Storage

本文链接：https://blog.youkuaiyun.com/qq_41564928/article/details/98036440

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了JavaScript实现离线应用的方法，包括通过navigator.onLine属性进行离线检测，使用manifest文件实现应用缓存，以及利用cookie、sessionStorage、localStorage进行数据存储。重点讲解了应用缓存的工作原理和Web存储机制，为开发离线可用的Web应用提供指导。

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

离线应用与客户端存储

1.离线检测

navigator对象
- navigator.onLine 属性表示当前设备是否在线，在线则返回 true，离线则返回 false
离线检测事件
- online ：当浏览器从离线变为上线时触发
- offline：当浏览器从上线变为离线时触发

2.应用缓存

manifest file
- appcache是从浏览器缓存中抽取一部分缓存用来下载想要下载的资源，资源写在描述文件中(manifest file)
- ```
CACHE MANIFEST
#Comment

file.js
file.css
```
  上图就是一个 .manifest 文件的内容图，列出想要下载的资源
- 在 html 文件中引入 .manifest 文件
- ```
<html manifest="./offline.manifest">
```
- 下载资源后，可以在离线时也能调用这些资源了

3. 数据存储

cookie
绑定在特定的域名下，当设定了一个cookie后，再给创建它的域名发送请求时都会包含这个cookie
一个域名下的cookie是有限的
cookie的名称不区分大小写
设置 cookie
```
document.cookie = "id=joey";
```
当客户端每次向服务器端发送请求的时候，都会发送这个cookie

4. Web 存储机制

Storage 类型

方法

clear(); //删除所有存储
getItem(name); //根据指定名字name获取对应的值
key(index); //获得index处的值的名字
removeItem(name); //删除由name指定的名值对儿
setItem(name,value); //为指定的name设置一个对应的值

sessionStorage 对象

含义：存储特定于某个会话的数据（只保持到浏览器关闭）
是 storage 类型的一个实例，因此可以用 storage 的方法来存储数据

//保存 sessionStorage 数据
sessionStorage.setItem("name","Nicholas");
//保存 sessionStorage 数据
sessionStorage.book = "Javascript";
//获取 sessionStorage 数据
var name = sessionStorage.getItem("name");
//获取 sessionStorage 数据
var book = sessionStorage.book;
//迭代 sessionStorage 数据
for(var key in sessionStorage){
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}
//删除 sessionStorage 
delete sessionStorage.name;
sessionStorage.removeItem("book");

仅针对会话的小段数据的存储
如果要跨越会话存储数据，用globalStorage和 localstorage更合适

globalStorage 对象
- 跨越会话存储数据，但有特定的访问限制
- ```
globalStorage["vchenzhe.com"].name = "Nicholas";
//这个数据只能由来自vchenzhe.com的页面及其子页面才能访问
```
  使用 globalStorage 的时候一定要指定一个域名
- 如果不用delete 或者 romoveItem 或清除浏览器缓存的话，globalStorage 会一直存在磁盘上

localStorage 对象

替代了 globalStorage
要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效）

localStorage.setItem("name","Nicholas");
localStorage.book = "Professional Javascript";
var name = localStorage.getItem("name");
var book = localStorage.book;