Javascript学习笔记19 离线应用和客户端存储

布满荆棘的人生 2022-05-25 01:10 199阅读 0赞

## 离线检测 ##

HTML5的`navigator.onLine`属性可以检测设备的网络状态，值为`true`表示能上网，为`false`表示离线

if (navigator.onLine){
        //正常工作
    } else {
       //离线任务
    }

除此之外HTML5还定义了两个事件`online`和`offline`，当网络从离线变为在线或从在线变为离线时分别触发这两个事件

window.addEventListener("online",function(){ 
        alert("Online");
    },false);
    
    window.addEventListener("offline",function(){ 
        alert("Offline");
    },false);

--------------------

## 应用缓存 ##

HTML5的应用缓存（appcache），是专门为开发离线web应用而设计的。要想在缓存中保存数据，需要使用一个**描述文件（manifest file）**，列出要下载和缓存的资源。

**manifest 文件可分为三个部分：**

*  CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存，等价于CACHE
 *  NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
 *  FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
    file.js
    file.css
    
    NETWORK
    *
    
    FALLBACK
    info.html

**并将描述文件和页面关联起来**，描述文件的后缀名一般为appcache

Javascript的**applicationCache**对象的`status`属性可以检测当前应用缓存的状态

*  0：无缓存
 *  1：闲置，即缓存未更新
 *  2：正在下载描述文件并检查更新
 *  3：正在下载描述文件中指定的资源
 *  4：更新完成
 *  5：无法访问应用缓存

事件

*  error：发生错误时触发
 *  progress：文件下载过程中不断触发
 *  updateready：页面新的应用缓存下载完毕，可以通过swapCache()使用
 *  cached：应用缓存完整可用

方法

*  update()：检查描述文件是否更新，若更新，则下载新的资源
 *  swapCache()：当触发了updateready事件时，说明新版本的应用缓存已可用，调用该方法启用新缓存

--------------------

## Cookie ##

HTTP Cookie， **最初用于在客户端存储会话消息**，其介绍和相应的HTTP头部字段见如下两篇博客介绍  
[https://blog.csdn.net/zjw\_python/article/details/79217644][https_blog.csdn.net_zjw_python_article_details_79217644]  
[https://blog.csdn.net/zjw\_python/article/details/79310100][https_blog.csdn.net_zjw_python_article_details_79310100]

Cookie由以下几部分构成

*  名称：不区分大小写
 *  值：必须被URL编码
 *  域：表示cookie对哪个域是有效的
 *  路径：对于指定域中的那个路径，才对服务器发送Cookie
 *  失效时间：表示cookie何时应该被删除，GMT格式日期（Wdy，DD-MM-YYYY HH:MM:SS GMT）
 *  安全标识：指定后，cookie只有在使用SSL连接的时候才会发送到服务器

HTTP/1.1 200 OK
    Content-type: text/html
    Set-Cookie: name=value; expires = Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
    other-header:value

**路径，域，失效时间，安全标志等都是服务器发给浏览器的指示，这些参数不会被发送到服务器，只有名称-值对才会被发送。Cookie的数目和尺寸不同的浏览器有限制，不要创建超过浏览器限制数目和尺寸的cookie，否则可能会被废弃**

**Javascript处理cookie**  
页面的cookie信息都以字符串的形式存储在`document.cookie`属性中，可以使用javascript进行处理

name1=value1;name2=value2;name3=value3

所有名称和值都是经过URL编码的，必须使用`decodeURIComponent()`来解码

**当设置cookie值时**，可以为`document.cookie`设置一个新的cookie字符串，其会被解释并添加到现有的cookie集合中，而不会覆盖原有的cookie，除非cookie名称已存在，使用的格式与`Set-Cookie`头中一致，在设置值时，建议先使用`encodeURIComponent()`进行URL编码

name=value;expires=time;path=domain_path;secure

**没有删除已有cookie的直接方法**，需要使用相同的路径、域、安全选项再次设置cookie，并将失效时间设置为过去的时间

子cookie用于绕开单域名下cookie数目的限制，可使用查询字符串的形式存储在单个cookie值中，比如

name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

--------------------

## Web Storage ##

Web Storage提供一种在cookie之外的存储会话数据的途径，并提供了大量存储空间。

**Storage类型**  
该类型提供以下方法，可以直接调用，也可通过Storage对象间接调用

*  getItem(name)：根据指定的名字name获取对应的值
 *  key(index)：获得index位置处的值的名字
 *  removeItem(name)：删除由name指定的名值对儿
 *  setItem(name,value)：为指定的name设置一个对应的值

Storage类型还具有`length`属性用于判断值对的数目。Storage类型只能存储字符串，非字符串数据在存储前会被转换为字符串

**sessionStorage对象**  
用于存储特定于某个会话的数据，数据只保持到浏览器关闭。sessionStorage对象是Storage的一个实例，可以使用Storage类型的方法或直接设置属性来存储数据。**sessionStorage对象中的数据只能被最初给对象存储数据的页面访问到，对于多页面有限制。**

sessionStorage.setItem("name","zjw");
    
    sessionStorage.book = "javascript";
    
    var name = sessionStorage.getItem("name");
    
    sessionStorage.removeItem("book");

**localStorage对象**  
localStorage是Storage的实例，可以像使用sessionStorage一样来使用它。**要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），且使用同一种协议，在同一个端口上。**

localStorage.setItem("name","zjw");
    
    localStorage.book = "javascript";
    
    var name = localStorage.getItem("name");
    
    localStorage.removeItem("book");

**storage事件**  
对Storage对象进行任何修改（保存、删除数据），都会在文档中触发storage事件，这个事件的`event`对象具有以下属  
性：

*  domain：发生变化时的存储空间域名
 *  key：设置或删除的键名
 *  newValue：如果是设置值，则是新值，若为删除值，该值为null
 *  oldValue：键被更改之前的值

**浏览器对于每个来源（协议、域和端口）的存储数据有限制，sessionStorage和localStorage一般都是2.5MB。**

[https_blog.csdn.net_zjw_python_article_details_79217644]: https://blog.csdn.net/zjw_python/article/details/79217644
[https_blog.csdn.net_zjw_python_article_details_79310100]: https://blog.csdn.net/zjw_python/article/details/79310100