緩存

時間 2019-11-09

標籤緩存简体版

原文原文鏈接

分享會 - 緩存

「空間換時間」，犧牲一部分空間代價，來換取總體效率的提高

0 離線應用的preconditions a是否能上網 b應用必須能訪問必定的資源 c必須有一塊本地空間用於保存數據

1 表示是否在線 navigator.onLine

2 firefox opera 必須文件->Web開發人員->脫機工做，才能讓瀏覽器正常工做

3 兩個事件 online offline

EventUtil.addHandler( window, "online", function(){});

EventUtil.addHandler( window, "offline", function(){});

4 application cache 或者稱爲appcache, 要想在這個緩存中保存數據，要用一個描述性文件

manifest file

file.js

file.css

<html manifest="/offline.manifest"> 這個文件的mine類型必須爲

text / cache-manifest

擴展名推薦用appcache，

5 applictionCache對象。屬性: status 屬性，值是常量

0 無緩存

1 閒置,應用緩存未獲得更新

2 檢查中,即正在下載描述文件並檢查更新

3 下載中,即應用緩存正在下載描述文件中指定的資源

4 更新完成, 即應用緩存已經更新了資源，並且全部資源已下載完畢，能夠經過swapCache()來使用了

5 廢棄：應用緩存的描述文件已經不存在，即沒法再訪問緩存

6 表示應用緩存狀態改變的事件

checking：在瀏覽順爲應用緩存查找更新時觸發

error：在檢查更新或下載資源期間發生錯誤時觸發

noupdate：在檢查描述文件發現文件無變化時觸發

downloading：在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程當中持續不斷地觸發

updateready：在頁面新的應用緩存下載完畢且能夠經過 swapCache（）使用時觸發

cached：在應用緩存完整可用時觸發

7 applicationCache.update() 一經調用，應用緩存就會去檢查描述文件是否更新(觸發checking事件)

應用緩存已經準備就緒，觸發cached事件

新版本的應用緩存已經可用，觸發updateready事件，此時你須要啓用swapCache()來啓用新應用緩存好比:

EventUtil.addHandler( applicationCache, "updateready", function(){

applicationCache.swapCache();

} ) ;

8 Persistent Client State: Http Cookies

https://curl.haxx.se/rfc/cookie_spec.html

cookie 好像是客戶端在發給服務端消息時要附帶的數據

9 Set-Cookie Http Response Header 語法

NAME=value 這是惟一必須的

expireds=DATE 格式: Wdy, DD-Mon-YYYY HH:MM:SS GMT

domain=Domain_Name

path=PATH

secure, 只能用https

name和value都必須是url編碼

10 Cookie Https Request Header的語法

he browser will match the URL against all cookies and if any of them match, a line containing the name/value pairs of all matching cookies will be included in the HTTP request. Here is the format of that line:

Cookie: NAME1=OPAQUE_STRING1; NAME2=OPAQUE_STRING2 ...

11 cookie只是在客戶端存儲數據的其中一個選項

12 cookie最初是在客戶端用於存儲會話信息的，該標準要求服務器對任意Http請求發送Set-Cookie Http頭做爲響應的一部分，其中包含會話信息。例如：

http/1.1 200 ok

Content-type: text/html

SetCookie: name=value

Other-header: other-header-value

13 瀏覽器會存儲這樣的會話信息，並在這以後，經過爲每一個請求添加Cookie Http頭將信息發送回服務器，以下所示:

Get /index.html Http/1.1

Cookie: name=value

Other-header: other-header-value

發送回服務器的額外信息能夠用於惟一驗證客戶來自於發送的哪一個請求.

14 限制

cookie在性質上是綁定在特定的域名下的，當設定了一個Cookie後，再給建立它的域名發送請求時，都會包含這個cookie。這個限制確保了儲存在Cookie中的信息只能讓批准的接受訪問，而沒法被其餘域訪問。

15 cookie 是存在客戶端pc上，每一個域的cookie總數是有限的，

ie firefox 是50個

opera 是30個

safari 和 chrome 沒有硬性規定

超限會清掉之前的

16 瀏覽器對cookie的尺寸也有限制，每一個域下的全部cookie要在4095B如下。就是4kB

若是你建立得過大，會被自動清掉.

17 1字節等於8比特，1byte=8bit

1kb==1024字節

B就是字節 b是比特

一個英文佔一個字節

一個漢字佔兩個字節

一m帶寬的意思，一兆比特每秒，而不是一兆字節每秒

18 cookie的構成

名稱: 不區分大小寫，名稱必須經過URL編碼

值: 必須被URL編碼

域: cookie對於哪一個域是有效的。全部向該域發送的請求都會包含這個cookie信息. 這個值能夠包含子域，如www.vox.com; 也能夠不包含它( 若是vox.com, 則對於它全部的子域都有效)，若是沒有明確設定，那麼這個域會被認做來自設置cookie的那個域.

路徑: 對於指定域的那個路徑，應該向服務器發送cookie，例如，你能夠指定cookie只有從http://www.wrox.com/books/中才能訪問，那麼http://www.wrox.com的頁面就不會發送cookie信息，即便請求都是來自同一個域的.

失效時間: 表示cookie被刪除的時間戳，默認狀況下，瀏覽器會話結束即將全部cookie刪除。cookie能夠瀏覽器器關閉後依然保存在用戶的機器上

安全標誌: 指定後，cookie只有在使用ssl鏈接的時候纔會發送到服務器，例如cookie信息只能發送給https://www.vox.com. 而http://www.vox.com 的請求則不能發送cookie

19 每一段信息都做爲Set-Cookie頭的一部分，使用分號加空格分隔每一段，以下例所示：

http/1.1 200 ok

Content-type: text/html

Set-Cookie: name=value; expires=Mon, 22-Jan-01 01:0:20 GMT; domain:.wrox.com;secure; path=/

20 域，路徑，失效時間，和 secure 標誌，都是服務器給瀏覽器的指示，以指定什麼時候應該發送cookie. 這些參數並不會做爲發送到服務器的cookie信息的一部分，只有名值對兒纔會被髮送

21 javascript中的cookie

BOM的document.cookie很蹩腳的，不是很直觀. 它會由於使用方式的不一樣表現出不一樣的行爲，當用來獲取屬性值時，document.cookie返回當前頁面可用的全部cookie的字符串，用分號隔開的名值對兒，以下例所示.

name1=value1;name2=value2;name3=value3

全部名字和值都是通過url編碼的，因此必須使用decodeURIComponent（）來解碼.

22 當用於設置值時，document.cookie屬性能夠設置爲一個新的cookie字符串，這個cookie字符串會被解釋並添加到現有的cookie集合中，設置document.cookie並不會覆蓋cookie, 除非設置的cookie名稱已存在，

格式： name=value;expire=expiration_time;path=domain_path;domain=domain_name:secure 這些參數中，只有cookie的名字和值是必需的，

要這樣寫： document.cookie = encodeURIComponent("name") + "=" +

encodeURIComponent("Nicol") ;

23 子cookie

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

24 還有一類cookie被稱爲http專有Cookie, 它能夠從瀏覽器或服務器設置，但只能從服務器端讀取，由於javascript沒法獲取http專有cookie的值

35 cookie數據太多會影響請求性能，建議只存少許數據，而且敏感數據不要存在裏面

36 持久化用戶數據

1 容許每一個文檔最多128KB，每一個域名最多1MB數據.

首先要使用css在某個元素上指定userData行爲

2 設置

var dataStore = document.getElementById("dataStore");

dataStore.setAttribute("name","Jason");

dataStore.save("BookInfo")

3 獲取

dataStore.load("BookInfo");

dataStore.getAttribute("name");

4 刪除

dataStore.removeAttribute("name");

dataStore.save("BookInfo");

5 與cookie的區別

5.1 沒法將用戶數據訪問限制擴展到更多的客戶,

5.2 可跨會話持久存在，也不會過時.

5.3 刪除數據只能用removeAttribute()

6 和cookie的相同點

6.1 要訪問某個數據空間，腳本運行的頁面必須來自同一個域名，在同一個路徑下，並使用與進行存儲的腳本一樣的協議.

37 Web Storage 機制

37.1 目的

37.1.1 提供一種在cookie以外存儲會話數據的途徑.

37.1.2 提供一種存儲大量能夠跨會話存在的數據的機制

實現Storage類型，有兩個對象的定義：sessionStorage 和 globalStorage 這兩個都是以windows對象屬性的形式存在的

37.2 方法

clear()

getItem( name ). 根據指定的名字獲取對應的值

key(index). 得到index位置處的值的名字

removeItem(name), 刪除由name指定的名值對兒

setItem(name,value)，爲指定的name設置一個對應的值

length 判斷有多少名值對兒存放在Storage對象中

remainingSpace() 用於獲取還可使用的存儲空間的字節數

38 sessionStorage對象

可存儲特定於某個會話的數據，只保持到瀏覽器關閉

能夠跨越頁面刷新而存在，同時若是瀏覽器支持，瀏覽器崩潰並重啓後依然能夠用（這一點IE不支持）

它是Storage的一個實例，能夠用Storage類的方法

firefox WebKit是同步寫入，而ie是異步寫入（那ie可更快地恢復執行，它會跳過實際的磁盤寫入過程）

ie8中能夠強制把數據寫入磁盤：

sessionStorage.begin() 這行的目的是確保在這段代碼執行的時候不會發生其它磁盤寫入操做

sessionStorage.name = ""

sessionStorage.commit();這段代碼確保了當即被寫入磁盤,

39 可用length和key迭代出sessionStorage中的值

for( var i=0, len=sessionStorage.length ; i < len ; i ++ ){

var key = sessionStorage.key( i ) ;

var value = sessionStorage.getItem( key ) ;

alert( value ) ;

}

40 也可用for in來迭代出sessionStorage中的值

for( var key in sesssionStorage ){

var value = sessionStorage.getItem( key ) ;

}

globalStorage對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。