前端經常使用緩存技術之Cookie和localStorage和sessionStorage和ApplicationCache
一、Cookie
JavaScript是運行在客戶端的腳本，所以通常是不可以設置Session的，由於Session是運行在服務器端的。而cookie是運行在客戶端的，因此能夠用JS來設置cookie。javascript
cookie的結構：簡單地說，cookie是以鍵值對的形式保存的，即key=value的格式。各個cookie之間通常是以「;」分隔。php
cookie是瀏覽器提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。能夠由JavaScript對其進行控制，而並非JavaScript自己的性質。cookie是存於用戶硬盤的一個文件，這個文件一般對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。所以，cookie能夠跨越一個域名下的多個網頁，但不能跨越多個域名使用。 css
cookie機制將信息存儲於用戶硬盤，所以能夠做爲全局變量，這是它最大的一個優勢。它能夠用於如下幾種場合。 html
（1）保存用戶登陸狀態。（2）跟蹤用戶行爲。（3）定製頁面。（4）建立購物車，例如淘寶網就使用cookie記錄了用戶曾經瀏覽過的商品，方便隨時進行比較。 前端
cookie能完成的部分應用，還有更多的功能須要全局變量。cookie的缺點主要集中於安全性和隱私保護。主要包括如下幾種： html5
（1）cookie可能被禁用。當用戶很是注重我的隱私保護時，他極可能禁用瀏覽器的cookie功能；
（2）cookie是與瀏覽器相關的。這意味着即便訪問的是同一個頁面，不一樣瀏覽器之間所保存的cookie也是不能互相訪問的；
（3）cookie可能被刪除。由於每一個cookie都是硬盤上的一個文件，所以頗有可能被用戶刪除；
（4）cookie安全性不夠高。全部的cookie都是以純文本的形式記錄於文件中，所以若是要保存用戶名密碼等信息時，最好事先通過加密處理。 java
JS設置cookie:chrome
假設在A頁面中要保存變量username的值("jack")到cookie中,key值爲name，則相應的JS代碼爲：數據庫
document.cookie = ‘name = ’+ username;json
JS讀取cookie:
假設cookie中存儲的內容爲：name=jack;password=123
則在B頁面中獲取變量username的值的JS代碼以下：
var username=document.cookie.split(";")[0].split("=")[1];
//JS操做cookies方法!
//寫cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
讀取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
刪除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
完整代碼
//若是須要設定自定義過時時間,那麼把上面的setCookie 函數換成下面兩個函數就ok;
function setCookie(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function getsec(str) {
alert(str);
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
}
setCookie("name", "hayden");
alert(getCookie("name"));
//這是有設定過時時間的使用示例：
//s20是表明20秒
//h是指小時，如12小時則是：h12
//d是天數，30天則：d30
setCookie("name", "hayden", "s20");
二、localStorage
1、什麼是localstorage？
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。
2、localstorage的優點與侷限
localStorage的優點
一、 localStorage拓展了cookie的4K限制
二、 localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的
localStorage的侷限
一、 瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性
二、 目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換
三、 localStorage在瀏覽器的隱私模式下面是不可讀取的
四、 localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
五、 localStorage不能被爬蟲抓取到
localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空
三、localstorage的使用
這裏要特別聲明一下，若是是使用IE瀏覽器的話，那麼就要UserData來做爲存儲，這裏主要講解的是localStorage的內容，因此userData不作過多的解釋，並且以博主我的的見解，也是沒有必要去學習UserData的使用來的，由於目前的IE6/IE7屬於淘汰的位置上，並且在現在的不少頁面開發都會涉及到HTML5\CSS3等新興的技術，因此在使用上面通常咱們不會去對其進行兼容
首先在使用localStorage的時候，咱們須要判斷瀏覽器是否支持localStorage這個屬性
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//主邏輯業務
}
localStorage的寫入，localStorage的寫入有三種方法
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.a=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
這裏要特別說明一下localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage
注意：存儲進去的是int類型，可是打印出來倒是string類型，這個與localStorage自己的特色有關，localStorage只支持string類型的存儲。
localStorage的讀取
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.a=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一種方法讀取
var a=storage.a;
console.log(a);
//第二種方法讀取
var b=storage["b"];
console.log(b);
//第三種方法讀取
var c=storage.getItem("c");
console.log(c);
}
這裏面是三種對localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取，不要問我這個爲何，由於這個我也不知道
我以前說過localStorage就是至關於一個前端的數據庫的東西，數據庫主要是增刪查改這四個步驟，這裏的讀取和寫入就至關於增、查的這兩個步驟
下面咱們就來講一說localStorage的刪、改這兩個步驟
改這個步驟比較好理解，思路跟從新更改全局變量的值同樣，這裏咱們就以一個爲例來簡單的說明一下
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.b=1;
//寫入c字段
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*分割線*/
storage.a=4;
console.log(storage.a);
}
這個在控制檯上面咱們就能夠看到已經a鍵已經被更改成4了
localStorage的刪除
一、 將localStorage的全部內容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
二、 將localStorage中的某個鍵值對刪除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
localStorage的鍵獲取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
使用key()方法，向其中出入索引便可獲取對應的鍵。
4、localstorage的其餘注意事項
通常咱們會將JSON存入localStorage中，可是在localStorage會自動將localStorage轉換成爲字符串形式
這個時候咱們可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串
示例：
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
讀取以後要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//將JSON字符串轉換成爲JSON對象輸出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
三、sessionStorage
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。下面是其用法:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SessionStorage</title>
<script type="text/javascript">
window.onload = function() {
//首先得到body中的3個input元素
var msg = document.getElementById("msg"); //文本框要輸入的內容
var getData = document.getElementById("getData"); //獲取數據
var setData = document.getElementById("setData"); //保存數據
var removeData = document.getElementById("removeData"); //移除數據
setData.onclick = function() //存入數據
{
if (msg.value) {
sessionStorage.setItem("data", msg.value); //把data對應的值保存到sessionStorage
alert("信息已保存到data字段中");
} else {
alert("信息不能爲空");
}
}
getData.onclick = function() {
//獲取數據
var msg = sessionStorage.getItem("data");
if (msg) {
alert("data字段中的值爲：" + msg); //把data對應的值彈出來
} else {
alert("data字段無值！");
}
}
removeData.onclick = function() //移除數據
{
var msg = sessionStorage.getItem("data");
sessionStorage.removeChild(msg);
}
}
</script>
</head>
<body>
<input id="msg" type="text" />
<input id="setData" type="button" value="保存數據" />
<input id="getData" type="button" value="獲取數據" />
<input id="removeData" type="button" value="移除數據" />
</body>
</html>
另外還有一點要注意的是，其餘類型讀取出來也要進行轉換。
四、ApplicationCache
applicationCache是html5新增的一個離線應用功能
•離線瀏覽: 用戶能夠在離線狀態下瀏覽網站內容。
•更快的速度: 由於數據被存儲在本地，因此速度會更快.
•減輕服務器的負載: 瀏覽器只會下載在服務器上發生改變的資源。
在對應用進行緩存的時候須要一個manifest文件，
cache manifest 格式以下
首行必須是CACHE MANIFEST
接下來能夠分爲三段： CACHE， NETWORK，與 FALLBACK
CACHE:這是緩存文件中記錄所屬的默認段落。在 CACHE: 段落標題後(或直接跟在 CACHE MANIFEST 行後)列出的文件會在它們第一次下載完畢後緩存起來。NETWORK:在 NETWORK: 段落標題下列出的文件是須要與服務器鏈接的白名單資源。全部相似資源的請求都會繞過緩存，即便用戶處於離線狀態。可使用通配符。FALLBACK:FALLBACK: 段指定了一個後備頁面，當資源沒法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示後備頁面。兩個 URI 都必須使用相對路徑而且與清單文件同源。可使用通配符。
CACHE， NETWORK， 和 FALLBACK 段落能夠以任意順序出如今緩存清單文件中，而且每一個段落能夠在同一清單文件中出現屢次。
applicationcache/
├── static/
│ ├── css/
│ │ └── example.css
│ └── js/
│ └── example.js
└── index.jsp
#代碼以下
#example.css
#clock { font: 2em sans-serif; }
#example.js
window.onload = function(){
window.onload = function(){
setInterval(function(){
document.getElementById('clock').innerHTML = new Date();
},1000);
};
};
#index.jsp
<link type="text/css" href="static/css/example.css" rel="stylesheet"/>
<script src="static/js/example.js"></script>
<div id="clock"></div>
咱們加html5新增的神器manifest文件
文件添加在static文件夾下，文件內容以下
#example.manifest
CACHE MANIFEST
./js/example.js
../index.jsp
NETWORK:
./css/exmaple.css
這時須要修改index.jsp文件內容
<html> --> <html manifest="static/example.manifest">
文件說明對js和jsp進行緩存，而css文件則列入白名單不緩存，再次啓動服務。。。。
訪問的時候你看到的頁面是沒任何變化的，跟第一次訪問的頁面是一個鳥樣的，不過你按下F12就會看到瀏覽器已經對的的文件進行緩存了
在resources->application cache選項下能夠看到瀏覽器緩存的是什麼東東，也可使用 chrome://appcache-internals/ 命令在Chrome瀏覽器中進行查看刪除。
好了**奇蹟的時刻到了，我再次把服務停了。。。。。。再次訪問，居然能夠訪問到，不會像第一次那樣提示掛了。
可是樣式沒了。。。那就是咱們剛剛把樣式置爲白名單了，沒有緩存下來
若是你的manifest文件修改了，你能夠手動或自動更新它
1.自動更新
瀏覽器除了在第一次訪問 Web 應用時緩存資源外，只會在 cache manifest 文件自己發生變化時更新緩存。而 cache manifest 中的資源文件發生變化並不會觸發更新。
2.手動更新
開發者也可使用 window.applicationCache 的接口更新緩存。方法是檢測 window.applicationCache.status 的值，若是是 UPDATEREADY，那麼能夠調用 window.applicationCache.update() 更新緩存。示範代碼以下。
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.update();
}
applicationCache狀態值
UNCACHED(未緩存) 一個特殊的值，用於代表一個應用緩存對象尚未徹底初始化。
IDLE(空閒) 應用緩存此時未處於更新過程當中。
CHECKING(檢查) 清單已經獲取完畢並檢查更新。
DOWNLOADING(下載中) 下載資源並準備加入到緩存中，這是因爲清單變化引發的。
UPDATEREADY(更新就緒) 一個新版本的應用緩存可使用。有一個對應的事件 updateready，當下載完畢一個更新，而且還未使用 swapCache() 方法激活更新時，該事件觸發，而不會是 cached 事件。
OBSOLETE(廢棄) 應用緩存如今被廢棄。
也能夠在線狀態檢測
1.navigator.onLine
navigator.onLine 屬性表示當前是否在線。若是爲 true, 表示在線；若是爲 false, 表示離線。當網絡狀態發生變化時，navigator.onLine 的值也隨之變化。開發者能夠經過讀取它的值獲取網絡狀態。
2.online/offline 事件
當開發離線應用時，經過 navigator.onLine 獲取網絡狀態一般是不夠的。開發者還須要在網絡狀態發生變化時馬上獲得通知，所以 HTML5 還提供了 online/offline 事件。當在線 / 離線狀態切換時，online/offline 事件將觸發在 body 元素上，而且沿着 document.body、document 和 window 的順序冒泡。所以，開發者能夠經過監聽它們的 online/offline 事件來獲悉網絡狀態。
- 1. cookie、sessionStorage和localStorage
- 2. Cookie、localStorage和sessionStorage
- 3. cookie，localStorage和sessionStorage
- 4. sessionStorage 、localStorage 和 cookie
- 5. 前端cookie、localStorage、sessionStorage緩存技術總結
- 6. Web前端存儲之sessionStorage和localStorage
- 7. HTML5的LocalStorage和sessionStorage的使用 -緩存
- 8. localStorage和SessionStorage，Application，Cache緩存
- 9. cookie、session、sessionStorage和localStorage
- 10. cookie,session,sessionStorage和localStorage
- 更多相關文章...
- • 二級緩存的併發訪問策略和常用插件 - Hibernate教程
- • W3C詞彙和術語表 - 網站建設指南
- • 適用於PHP初學者的學習線路和建議
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. cookie、sessionStorage和localStorage
- 2. Cookie、localStorage和sessionStorage
- 3. cookie，localStorage和sessionStorage
- 4. sessionStorage 、localStorage 和 cookie
- 5. 前端cookie、localStorage、sessionStorage緩存技術總結
- 6. Web前端存儲之sessionStorage和localStorage
- 7. HTML5的LocalStorage和sessionStorage的使用 -緩存
- 8. localStorage和SessionStorage，Application，Cache緩存
- 9. cookie、session、sessionStorage和localStorage
- 10. cookie,session,sessionStorage和localStorage