cookie
首先讓我們先了解一下，什么是cookie，cookie是瀏覽器提供的一種機制，他將document.cookie的接口提供給JavaScript使其可以對cookie進行控制，但cookie并不是JavaScript本身的屬性，cookie是儲存于用戶硬盤的一個文件（測試的時候在FF測試，其他瀏覽器不支持直接輸出cookie）
-
cookie的作用
- 由于http協議本身是一個無狀態的通信協議，所以我們需要把一些信息通過cookie一起進行傳遞，保證服務器能識別，可以理解為cookie是用來增強http協議的部分不足之處
- 由于cookie是存儲于用戶的硬盤上的，所以可以作為一個全局變量來使用，這是它最大的一個優點，可以根據這個特性來操作如：保存用戶登錄狀態，跟蹤用戶行為，創建購物車等
-
使用cookie需要注意的是
- cookie具有不可跨域性，不同域名下的cookie是不可以相互獲取的
- cookie有大小的限制，大概為4kb，也就是4096字節
- cookie需要設定過期時間，如果不設定的情況下默認關閉瀏覽器后清除
- 瀏覽器本身會限制每個站點的cookie的數量，大概為20個cookie
- cookie不建議放置太多內容，因為每次都會隨著請求頭一起發送，會影響性能，同時cookie在電腦上是可查看的，所以重要的信息不建議放置在cookie上
-
接下來是重點了，那么我們如何獲取cookie呢?在js中為我們提供了這么一種方法 doucmnet.cookie，返回的是一個字符串，我們來舉個例子
<script> document.cookie="userName=user" document.cookie="userName=xiaoming" console.log(document.cookie)//userName=xiaoming; suerNmae=xiaoming </script>這就是創建了一個cookie，userName代表cookie的名稱，user代表cookie的值，如果cookie的名稱不存在那么代表重新創建cookie，如果已經存在，代表為cookie重新賦值
-
接下來我們開始說一下如何設置和獲取以及刪除cookie
-
設置cookie，直接上代碼
<script> function setCookie(name,value,expDays){ //name 名字 value 值 expDays 過期時間 //首先設置expDays為當前時間 var expDate=new Date; //使用setDate的方法為當前時間加上expDays設置cookie的失效時間 expDate.setDate(expDate.getDate()+expDays); //設置cookie的內容時不能出現空格方，分號等特殊字符，使用escape對內容進行編碼 //通過toUTCString方法把日期轉換為字符串傳入 document.cookie=name+'='+escape(value)+';expires'+expDate.toUTCString(); } </script> -
獲取cookie，直接上代碼
<script> function getCookie(name){ //設置初始位置，檢查cookie中有沒有這個name var start=document.cookie.indexOf(name+"="); if(start !=-1){ //如果有的話把strat的位置變為由'='開始的位置 start=start+name.length+1; //設置cookie截取到的終點位置，到下一個";"為止 var end=document.cookie.indexOf(";",start); //這里是為了判斷如果這個name是cookie的最后一個值的話那么它的value是沒有";"的，直接到 cookie的結尾位置即可 if(end==-1) end=document.cookie.length; //將cookie的value的值解碼返回 return unescape(document.cookie.substring(start,end)) } //如果該cookie不存在的話直接返回空的字符串 return "" } </script> -
刪除cookie，這里需要說一下，cookie的刪除是由瀏覽器執行的，在瀏覽器發現cookie的有效日期已經過期的話會對該條cookie進行刪除操作，下面開始代碼
<script> //直接回調setCookie的方法，然后將cookie的有效時間向前一天 function removeCookie(name){ setCookie(name,"",-1) } </script>
-
localStorage,sessionStorage
那么我接下說一下關于localStorage（本地存儲）和sessionStorage（會話存儲）這兩個都是在HTML5中新增加的屬性，它們將瀏覽器的本地存儲的大小擴大到了5M，而且從IE8以上的瀏覽器都開始支持，localStorage指的是將數據存儲在瀏覽器本地，如果不進行清除那么數據會一直存在，sessionStorage表示的是會話存儲，如果瀏覽器關閉那么數據將會被清除，注意傳入的必須是字符串格式的,如果想要寫入的時候更復雜JSON.parse(localStorage.getItem("a"))，那么相應的導出的時候使用localStorage.setItem("a", JSON.stringify(obj))
在HTML5中，本地存儲是一個window的方法，所以檢測的代碼如下：
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
這兩者的方法，由于用法比較簡單，所以直接上代碼
<script>
window.localStorage.name="xiaoming";//設置name
window.localStorage["name"]="xiaobai";//設置name，注意需要是字符串格式的
localStorage.setItem("name","xiaohong");//設置name
console.log(localStorage.name);//最后設置的值覆蓋了之前設置的值
console.log(localStorage["name"]);//也是獲取localStorage的值，不過記的要傳入的是字符串
// localStorage.removeItem("name");//刪除指定的localStorage的屬性值
localStorage.clear();//清除所有localStarge的屬性和值
console.log(localStorage.getItem("name"));//獲取特定的localStorage的值，返回的是null
console.log(window.localStorage.name);//undefined
//推薦使用的方法，setItem，getItem，removeItem，clear
</script>
在H5中提供了一個key（）方法，用來在不知道鍵和值得情況下獲取所有的鍵和值，使用方法如下：
<script>
var stroage=window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)獲得相應的鍵，再用getItem()方法獲得對應的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
</script>
在H5中新增加了onstorage事件，當本地存儲發生改變時，會觸發該事件
StorageEvent對象的屬性：
- key：表示項目的key發生了變化；該屬性返回其初始化的值，創建對象后，該值被初始化為null。
- oldValue:表示變更前的值
- newValue:變更后的值
- url:事件觸發源的URL
- source:事件觸發源的URL
- storageArea:受到影響的storage對象
來一段代碼
<script>
window.onstorage = function (event) {
var key = event.key // 被修改的鍵名
var oldValue = event.oldValue // 舊的值
var newValue = event.newValue // 新的值
var url = event.url // 觸發改變的網頁的url
var storage = event.storageArea // 當前localStorage的引用(當sessionStorage改變時，這里就是當前sessionStorage的引用，好吧扯遠了，看不懂可以先無視)
}
</script>
if (!window.localStorage) {
Object.defineProperty(window, "localStorage", new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, "getItem", {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "key", {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "setItem", {
value: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "length", {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "removeItem", {
value: function (sKey) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "clear", {
value: function () {
if(!aKeys.length) { return; }
for (var sKey in aKeys) {
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
else { aKeys.splice(iThisIndx, 1); }
delete oStorage[sKey];
}
for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
aCouple = aCouples[nIdx].split(/\s*=\s*/);
if (aCouple.length > 1) {
oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}
