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

23.1 離線檢測

含義:設備能否上網
代碼:

  navigator.onLine

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

23.2 應用緩存

緩存的目的是專門爲網頁離線設計的,當然在在線情況也會緩存

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

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

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

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

2、globalStorage[]對象
特點:跨越回話限制,可以指定訪問域和持久存儲

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

3、 localStorage對象
特點:localStorage是globalStorage替代品,localStorage對象不能指定訪問域並且有同源策略,大小限制是chrome和safari 是2.5M其它大部分是5M
**注**:更大量的數據可以通過indexDB存儲
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章