1、Cookie
JavaScript是運行在客戶端的腳本，因此一般是不能夠設置Session的，因為Session是運行在服務器端的。而cookie是運行在客戶端的，所以可以用JS來設置cookie。
cookie的結構：簡單地說，cookie是以鍵值對的形式保存的，即key=value的格式。各個cookie之間一般是以“;”分隔。
cookie是瀏覽器提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而並不是JavaScript本身的性質。cookie是存於用戶硬盤的一個文件，這個文件通常對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。
cookie機制將信息存儲於用戶硬盤，因此可以作為全局變量，這是它最大的一個優點。它可以用於以下幾種場合。
（1）保存用戶登錄狀態。（2）跟蹤用戶行為。（3）定制頁面。（4）創建購物車，例如淘寶網就使用cookie記錄了用戶曾經瀏覽過的商品，方便隨時進行比較。
cookie能完成的部分應用，還有更多的功能需要全局變量。cookie的缺點主要集中於安全性和隱私保護。主要包括以下幾種：
（1）cookie可能被禁用。當用戶非常注重個人隱私保護時，他很可能禁用瀏覽器的cookie功能；
（2）cookie是與瀏覽器相關的。這意味着即使訪問的是同一個頁面，不同瀏覽器之間所保存的cookie也是不能互相訪問的；
（3）cookie可能被刪除。因為每個cookie都是硬盤上的一個文件，因此很有可能被用戶刪除；
（4）cookie安全性不夠高。所有的cookie都是以純文本的形式記錄於文件中，因此如果要保存用戶名密碼等信息時，最好事先經過加密處理。
JS設置cookie:
假設在A頁面中要保存變量username的值("jack")到cookie中,key值為name，則相應的JS代碼為：
document.cookie = ‘name = ’+ username;
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");
2、localStorage
一、什么是localstorage？
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。
二、localstorage的優勢與局限
localStorage的優勢
1、 localStorage拓展了cookie的4K限制
2、 localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
localStorage的局限
1、 瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性
2、 目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
3、 localStorage在瀏覽器的隱私模式下面是不可讀取的
4、 localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
5、 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的刪除
1、 將localStorage的所有內容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
2、 將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()方法，向其中出入索引即可獲取對應的鍵。
四、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);
3、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>
另外還有一點要注意的是，其他類型讀取出來也要進行轉換。
4、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 事件來獲悉網絡狀態。