前端幾種本地快取機制

在漫長的前端開發過程中，我們常用的幾種本地快取機制：cookie

,localstorge,sessionstorge

1.cookie的特點

cookie的內容主要包括：名字，值，過期時間，路徑和域。路徑與域一起構成cookie的作用範圍。若不設定過期時間，則表示這個cookie的生命期為瀏覽器會話期間，關閉瀏覽器視窗，cookie就消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。會話cookie一般不儲存在硬碟上而是儲存在記憶體裡，當然這種行為並不是規範規定的。若設定了過期時間，瀏覽器就會把cookie儲存到硬碟上，關閉後再次開啟瀏覽器，這些cookie仍然有效直到超過設定的過期時間。儲存在硬碟上的cookie可以在不同的瀏覽器程序間共享，比如兩個ie視窗。而對於儲存在記憶體裡的cookie，不同的瀏覽器有不同的處理方式。

2. session

說到cookie就不能不說session。

session機制。session機制是一種伺服器端的機制，伺服器使用一種類似於雜湊表的結構（也可能就是使用雜湊表）來儲存資訊。當程式需要為某個客戶端的請求建立乙個session時，伺服器首先檢查這個客戶端的請求裡是否已包含了乙個session標識（稱為session id），如果已包含則說明以前已經為此客戶端建立過session，伺服器就按照session id把這個session檢索出來使用（檢索不到，會新建乙個），如果客戶端請求不包含session id，則為此客戶端建立乙個session並且生成乙個與此session相關聯的session id，session id的值應該是乙個既不會重複，又不容易被找到規律以仿造的字串，這個session id將被在本次響應中返回給客戶端儲存。儲存這個session id的方式可以採用cookie，這樣在互動過程中瀏覽器可以自動的按照規則把這個標識傳送給伺服器。一般這個cookie的名字都是類似於seeesionid。但cookie可以被人為的禁止，則必須有其他機制以便在cookie被禁止時仍然能夠把session id傳遞歸伺服器。經常被使用的一種技術叫做url重寫，就是把session id直接附加在url路徑的後面。比如：還有一種技術叫做表單隱藏字段。就是伺服器會自動修改表單，新增乙個隱藏字段，以便在表單提交時能夠把session id傳遞歸伺服器。比如：

1

2 
3 
4 

name="testform"

action="/***">
type="hidden"
name="sessionid"
value="123456">
type="text">
form>

實際上這種技術可以簡單的用對action應用url重寫來代替。

3 cookie和session簡單對比

cookie和session 的區別：

4 document.cookie的屬性

expires屬性

指定了coolie的生存期，預設情況下coolie是暫時存在的，他們儲存的值只在瀏覽器會話期間存在，當使用者推出瀏覽器後這些值也會丟失，如果想讓cookie存在一段時間，就要為expires屬性設定為未來的乙個過期日期。現在已經被max-age屬性所取代，max-age用秒來設定cookie的生存期。

它指定與cookie關聯在一起的網頁。在預設的情況下cookie會與建立它的網頁，該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯。

domain屬性可以使多個web伺服器共享cookie。domain屬性的預設值是建立cookie的網頁所在伺服器的主機名。不能將乙個cookie的域設定成伺服器所在的域之外的域。例如讓位於order.damonare.cn的伺服器能夠讀取catalog.damonare.cn設定的cookie值。如果catalog.damonare.cn的頁面建立的cookie把自己的path屬性設定為「/」，把domain屬性設定成「.damonare.cn」，那麼所有位於catalog.damonare.cn的網頁和所有位於orlders.damonare.cn的網頁，以及位於damonare.cn域的其他伺服器上的網頁都可以訪問這個cookie。

它是乙個布林值，指定在網路上如何傳輸cookie，預設是不安全的，通過乙個普通的http連線傳輸

這是一種持久化的儲存方式，也就是說如果不手動清除，資料就永遠不會過期。

它也是採用key - value的方式儲存資料，底層資料介面是sqlite，按網域名稱將資料分別儲存到對應資料庫檔案裡。它能儲存更大的資料（ie8上是10mb，chrome是5mb），同時儲存的資料不會再傳送給伺服器，避免頻寬浪費。

下表是localstorge的一些屬性和方法

屬性方法

說明localstorage.length

獲得storage中的個數

localstorage.key(n)

獲得storage中第n個元素對的鍵值（第乙個元素是0）

localstorage.getitem(key)

獲取鍵值key對應的值

localstorage.key

獲取鍵值key對應的值

localstorage.setitem(key, value)

新增資料，鍵值為key，值為value

localstorage.removeitem(key)

移除鍵值為key的資料

localstorage.clear()

清除所有資料

localstorage的缺點

和伺服器端使用的session類似，是一種會話級別的快取，關閉瀏覽器會資料會被清除。不過有點特別的是它的作用域是視窗級別的，也就是說不同視窗間的sessionstorage資料不能共享的。使用方法（和localstorage完全相同）：

說明sessionstorage.length

獲得storage中的個數

sessionstorage.key(n)

獲得storage中第n個元素對的鍵值（第乙個元素是0）

sessionstorage.getitem(key)

獲取鍵值key對應的值

sessionstorage.key

獲取鍵值key對應的值

sessionstorage.setitem(key, value)

新增資料，鍵值為key，值為value

sessionstorage.removeitem(key)

移除鍵值為key的資料

sessionstorage.clear()

清除所有資料

前端快取之本地快取

之前說了http快取，今天說說本地快取。本地快取也是平時開發過程經常用的。本地快取就簡單多了，我們常用的有三個 cookie localstorage sessionstorage。cookie 一般用來儲存使用者資訊，每次請求的時候內容都會自動被傳遞給伺服器。不同瀏覽器對於cookie的大小並不統...

前端快取機制的總結

快取就相當於是對資源的一種副本實現，不管是在客戶端還是在服務端儲存著，用相同的url進行請求，直接從副本中請求資源而不再訪問源伺服器。快取種類很多，像是瀏覽器快取，cdn快取等都是我們比較熟悉的，當然還有 伺服器快取，閘道器快取等，這裡我主要介紹一下前兩種。乙個頁面的快取狀態可以通過這兩種方法去設定...

前端快取 瀏覽器快取機制

瀏覽器第一次向伺服器發起該請求後拿到請求結果後,將請求結果和快取標識存入瀏覽器快取,瀏覽器對於快取的處理是根據第一次請求資源時返回的響應頭來確定的。瀏覽器中的快取作用分為兩種情況，一種是需要傳送http請求，一種是不需要傳送。expires 即過期時間 expires max age 請求時間 存在...