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