緩存問題一直是我們在日常開發中需要特別關注的事情。
在日常的開發中，做好數據的緩存能使我們的程序執行效率更高，并且避免了對服務器的重復請求，減輕了服務器的負擔，也加快了用戶訪問的速度，那在各種前端技術中是如何實現數據的緩存的呢？今天我們就來學習一下h5中的緩存技術吧
在html中，大家最熟悉的應該就是我們之前一直在使用的cookie了，那到底什么是cookie呢？
cookie其實就是存儲在計算機中的用來存儲訪問者的變量，當我們訪問某個網頁時，就會從cookie中取出存儲的用戶信息顯示類似“XXXX（用戶名），歡迎回來！”等類似的信息。
但是cookie有明顯的缺陷：
- 存儲的大小限制，我們訪問同源的網站時存儲的數據可多可少，但是cookie的存儲限制僅為4k，這就對我們的日常使用或者開發造成了一些麻煩。
- cookie還有一個特征，就是無論我們訪問網頁請求數據的同時是否需要使用cookie中的數據，都會在http請求中攜帶上我們的cookie，因此cookie只適合用來保存很小的數據，比如登錄時間、會話標識等。
而今天我們要探討的是在h5中新增的專注于解決緩存問題的API，名為Web Storage(以下簡稱Storage)。
而Storage恰好彌補了cookie以上我們提到的缺陷：
- 針對于存儲的限制，storage增大了存儲的容量至5M或是更大。
- Storage則在請求時不會自動的將數據發送至服務器，只會在本地存儲。
- 此外還有一點區別就是cookie存儲數據有路徑的概念，我們可以限制cookie只屬于某個路徑下。
關于Storage,開發者將其分為兩種情況,一種是localStorage,一種是sessionStorage。
1.sessionStorage
session(會話)相信大家都不陌生，在多種語言中都出現過，例如php中的超全局變量session數組，例如iOS中取代NSURLConnect的NSURLSession等等。
而在h5中的sessionStorage則代表的是會話中的數據緩存，說明白一點就是在同源同窗口中始終存在的數據。也就是說如果這個瀏覽器窗口沒有關閉，就算是刷新了，進入了其他的同源頁面，數據仍然存在。
而在窗口關閉之后，甚至是同時獨立打開一瀏覽器訪問同一頁面，sessionStorage中的數據也是為空的，一次我們可以將sessionStorage歸類于會話級別的緩存。
好了說了這么多我們來看一下有關sessionStorage使用的代碼吧：
首先創建一個sessionStorage的變量，如下:
var storage = window.sessionStorage;
假如我們需要儲存用戶的賬號名稱，密碼，性別，有三種方法：
第一種
storage["username"] = "Ryan";
第二種
storage.password = "Jack";
第三種 這種方法有兩個參數，第一個參數就是我們要存儲的字段名，第個參數就是我們對應的信息。
storage.setItem('gender','man');
//接著我們打印一下結果如何
console.log(storage);
是不是已經存儲進去了？
我們將瀏覽器關閉，并將代碼更改如下，運行
var storage = window.sessionStorage; console.log(storage);
我們剛才所存儲的數據全部都沒有了。
2.localStorage
接下來我們看localStorage，localStorage單單作為本地緩存，并不會收到瀏覽器窗口的影響，既然我們將緩存數據的原網頁關閉，再次打開同源的網頁，我們存儲在localStorage中的數據依然存在。
例：
我們和sessionStorage做同樣的操作，存儲三個屬性，并且打印。
var storage = window.localStorage;
第一種
storage["username"] = "Ryan";
第二種
storage.password = "Jack";
第三種
storage.setItem('gener','man'); console.log(storage);
結果如下圖所示：
和sessionStorage不同的是我們將瀏覽器關閉，執行以下代碼：
//我們和sessionStorage做同樣的操作，存儲三個屬性，并且打印。
var storage = window.localStorage;
第一種
storage["username"] = "Ryan";
第二種
storage.password = "Jack";
第三種
storage.setItem('gener','man');
console.log(storage);
結果如下圖所示：
我們之前存儲的數據依然存在。
那sessionStorage和localStorage的主要區別就體現出來了:
sessionStorage的數據存儲會因為瀏覽器窗口的關閉清空，而localStorage只要不做清空的操作，打開同源的網站時會永久存在。
那該怎么清楚storage中存儲的信息呢？
//清空storage刪除緩存的信息
storage.clear();
//刪除storage中某條信息
storage.removeItem("username");
//修改某條信息的操作就是給這個屬性重新復制：
//修改信息
storage.password = "Bruce";
執行以上的代碼就可以啦~
緩存問題一直是我們在日常開發中需要特別關注的事情。
在日常的開發中，做好數據的緩存能使我們的程序執行效率更高，并且避免了對服務器的重復請求，減輕了服務器的負擔，也加快了用戶訪問的速度，那在各種前端技術中是如何實現數據的緩存的呢？今天我們就來學習一下h5中的緩存技術吧
在html中，大家最熟悉的應該就是我們之前一直在使用的cookie了，那到底什么是cookie呢？
cookie其實就是存儲在計算機中的用來存儲訪問者的變量，當我們訪問某個網頁時，就會從cookie中取出存儲的用戶信息顯示類似“XXXX（用戶名），歡迎回來！”等類似的信息。
但是cookie有明顯的缺陷：
- 存儲的大小限制，我們訪問同源的網站時存儲的數據可多可少，但是cookie的存儲限制僅為4k，這就對我們的日常使用或者開發造成了一些麻煩。
- cookie還有一個特征，就是無論我們訪問網頁請求數據的同時是否需要使用cookie中的數據，都會在http請求中攜帶上我們的cookie，因此cookie只適合用來保存很小的數據，比如登錄時間、會話標識等。
而今天我們要探討的是在h5中新增的專注于解決緩存問題的API，名為Web Storage(以下簡稱Storage)。
而Storage恰好彌補了cookie以上我們提到的缺陷：
- 針對于存儲的限制，storage增大了存儲的容量至5M或是更大。
- Storage則在請求時不會自動的將數據發送至服務器，只會在本地存儲。
- 此外還有一點區別就是cookie存儲數據有路徑的概念，我們可以限制cookie只屬于某個路徑下。
關于Storage,開發者將其分為兩種情況,一種是localStorage,一種是sessionStorage。
1.sessionStorage
session(會話)相信大家都不陌生，在多種語言中都出現過，例如php中的超全局變量session數組，例如iOS中取代NSURLConnect的NSURLSession等等。
而在h5中的sessionStorage則代表的是會話中的數據緩存，說明白一點就是在同源同窗口中始終存在的數據。也就是說如果這個瀏覽器窗口沒有關閉，就算是刷新了，進入了其他的同源頁面，數據仍然存在。
而在窗口關閉之后，甚至是同時獨立打開一瀏覽器訪問同一頁面，sessionStorage中的數據也是為空的，一次我們可以將sessionStorage歸類于會話級別的緩存。
好了說了這么多我們來看一下有關sessionStorage使用的代碼吧：
首先創建一個sessionStorage的變量，如下:
var storage = window.sessionStorage;
假如我們需要儲存用戶的賬號名稱，密碼，性別，有三種方法：
第一種
storage["username"] = "Ryan";
第二種
storage.password = "Jack";
第三種 這種方法有兩個參數，第一個參數就是我們要存儲的字段名，第個參數就是我們對應的信息。
storage.setItem('gender','man');
//接著我們打印一下結果如何
console.log(storage);
是不是已經存儲進去了？
我們將瀏覽器關閉，并將代碼更改如下，運行
var storage = window.sessionStorage; console.log(storage);
我們剛才所存儲的數據全部都沒有了。
2.localStorage
接下來我們看localStorage，localStorage單單作為本地緩存，并不會收到瀏覽器窗口的影響，既然我們將緩存數據的原網頁關閉，再次打開同源的網頁，我們存儲在localStorage中的數據依然存在。
例：
我們和sessionStorage做同樣的操作，存儲三個屬性，并且打印。
var storage = window.localStorage;
第一種
storage["username"] = "Ryan";
第二種
storage.password = "Jack";
第三種
storage.setItem('gener','man'); console.log(storage);
結果如下圖所示：
和sessionStorage不同的是我們將瀏覽器關閉，執行以下代碼：
//我們和sessionStorage做同樣的操作，存儲三個屬性，并且打印。
var storage = window.localStorage;
第一種
storage["username"] = "Ryan";
第二種
storage.password = "Jack";
第三種
storage.setItem('gener','man');
console.log(storage);
結果如下圖所示：
我們之前存儲的數據依然存在。
那sessionStorage和localStorage的主要區別就體現出來了:
sessionStorage的數據存儲會因為瀏覽器窗口的關閉清空，而localStorage只要不做清空的操作，打開同源的網站時會永久存在。
那該怎么清楚storage中存儲的信息呢？
//清空storage刪除緩存的信息
storage.clear();
//刪除storage中某條信息
storage.removeItem("username");
//修改某條信息的操作就是給這個屬性重新復制：
//修改信息
storage.password = "Bruce";
執行以上的代碼就可以啦~
以上就是關于本地緩存Web Storage的一些介紹 歡迎補充~~~
以上就是關于本地緩存Web Storage的一些介紹 歡迎補充~~~
