javascript-離線應用於客戶端存儲

時間 2019-12-05

標籤 javascript 離線應用於客戶端存儲欄目 JavaScript 简体版

原文原文鏈接

23.1 離線檢測

含義：設備可否上網
代碼：javascript

navigator.onLine

注：IE6+和safari+5，firefox3+和opera16+,chrome最新的沒問題html

23.2 應用緩存

緩存的目的是專門爲網頁離線設計的，固然在在線狀況也會緩存java

機制：當用戶在地址輸入請求的地址去請求網頁時，瀏覽器會先本地緩存中查看是否有對應的緩存文件，若是有而後查看‘新鮮度’就是是否過時了，若是過時了此時也不會去請求新的資源而是去與服務器端進行校驗覈對服務器端有沒有更新的資源若是有則去請求沒有就更新‘新鮮度’，新鮮度由響應時服務器告訴瀏覽器或者在返回的html中加meta屬性告訴瀏覽器，不過meta屬性一般是針對本地靜態文件chrome

(1) 離線緩存方法(我也沒實現，想想都離線了還讓用戶看啥，畢竟瀏覽器都有很好的網斷界面)：api

<html manifest="/e.manifest">

23.3 數據存儲

(1) Cookie瀏覽器

爲何：cookie的存在讓服務器和客戶端有了一種通信方式，由於http是無狀態的，能夠經過cookie讓服務器鑑別當前用戶，cookie的值存儲在客戶端本地（java建立的cookie存在於響應頭，而javascript建立的cookie存在於請求頭）注：cookie的存取的前提是頁面在服務中而不是本地文件

如何作（javascript）：賦值：document.cookie = 'name=jiang;expires=Thu, 18 Dec 2043 12:00:00 GMT';讀取：document.cookie；cookie沒有提供刪除的api，銷燬的間接方法是從新爲對應cookie賦值，並將過時時間設爲以前的一個時間，默認是瀏覽器關閉銷燬

限制：cookie在每一個域名下的數量是有限制的，各個瀏覽器限制的數量不同最少的是20，最多的chrome無限制，cookie的大小限制各個瀏覽器也不一樣，基本是4096+-1，也就是一個域名下的cookie大小在這個範圍內

**注**：碰到cookie數量的限制問題能夠經過‘子cookie’來解決，思路是cookie中鍵-值中值是另外一個鍵值

(2) Storage類型緩存

爲何：一樣是存儲，Cookie比Storage出現的早，那麼Storage的出現必定是爲了彌補Cookie的某些不足了，好比數量和大小的限制

如何作：Storage提供了一些API，clear(),getItem(name),key(index),removeItem(name),setItem(name,value)

一、 sessionStorage對象
特色：聲明週期是瀏覽器關閉前，訪問域是最初創建的頁面，只存在與服務器上資源本地靜態資源不支持，大小限制大部分是2.5M，IE8，opera是5M

二、globalStorage[]對象
特色：跨越回話限制，能夠指定訪問域和持久存儲

示例：
```
globalStorage['wrox.com'].name = 'jiang'; // 指定訪問域
```
**注**：指定的域名有同源策略，就是協議和端口要保持一致

三、 localStorage對象
特色：localStorage是globalStorage替代品，localStorage對象不能指定訪問域而且有同源策略，大小限制是chrome和safari 是2.5M其它大部分是5M
**注**：更大量的數據能夠經過indexDB存儲