JavaScript高級編程———數據存儲（cookie、WebStorage）
阿新 • • 發佈：2019-04-30
npr this www one 指定 arr nco throw 訪問
JavaScript高級編程———數據存儲（cookie、WebStorage）
<script>
/*Cookie 讀寫刪
CookieUtil.get()方法根據cookie的名稱獲取相應的值,它會在documen.cookie字符串中查找cookie名加上等於號的位置,
如果找到了,那麽使用indexof查找該位置之後的第一個分號(表示了該cookie的結束位置)
如果沒有找到分號,則表示該cookie是字符串中的最後一個,則余下的字符串都是cookie的值,
該值使用decodeURIComponent()進行解碼並最後返回,如果沒有發現cookie,則返回null
CookieUtil.set() 方法在頁面上設置一個 cookie，接收如下幾個參數：cookie的名稱，cookie的值，
可選的用於指定 cookie何時應被刪除的 Date 對象，cookie的可選的 URL路徑，可選的域，以及可選的
表示是否要添加 secure 標誌的布爾值。
CookieUtil.unset() 方法可以處理這種事情。它接收 4 個參數：
要刪除的 cookie 的名稱、可選的路徑參數、可選的域參數和可選的安全參數
*/
var CookieUtil = {
get: function (name) {
var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure) {
this.set(name, "", new Date(0), path, domain, secure);
}
};
var subCookieUtil = {
get: function (name, subName) {
var subCookies = this.getAll(name);
if (subCookies) {
return subCookies[subName];
} else {
return null;
}
},
getAll: function (name) {
var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null;
cookieEnd, subCookies, i, parts, result = {};
if (cookieStart > -1) {
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart +
cookieName.length, cookieEnd);
if (cookieValue.length > 0) {
subCookies = cookieValue.split("&");
for (i = 0, len = subCookies.length; i < len; i++) {
parts = subCookies[i].split("=");
result[decodeURIComponent(parts[0])] =
decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
set: function (name, subName, value, expires, path, domain, secure) {
var subcookies = this.getAll(name) || {};
subcookies[subName] = value;
this.setAll(name, subcookies, expires, path, domain, secure);
},
setAll: function (name, subcookies, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=",
subcookieParts = new Array(),
subName;
for (subName in subcookies) {
if (subName.length > 0 && subcookies.hasOwnProperty(subName)) {
subcookieParts.push(encodeURIComponent(subName) + "=" +
encodeURIComponent(subcookies[subName]));
}
}
if (cookieParts.length > 0) {
cookieText += subcookieParts.join("&");
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
} else {
cookieText += "; expires=" + (new Date(0)).toGMTString();
}
document.cookie = cookieText;
},
unset: function (name, subName, path, domain, secure) {
var subcookies = this.getAll(name);
if (subcookies) {
delete subcookies[subName];
this.setAll(name, subcookies, null, path, domain, secure);
}
},
unsetAll: function (name, path, domain, secure) {
this.setAll(name, null, new Date(0), path, domain, secure);
}
};
//設置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional JavaScript");
//讀取cookie的值
var cookieName = CookieUtil.get("name");
var cookieBook = CookieUtil.get("book");
console.log(cookieName);
console.log(cookieBook);
//刪除cookie
CookieUtil.unset("name");
CookieUtil.unset("book");
//設置 cookie，包括它的路徑、域、失效日期
CookieUtil.set("name", "Nicholas", "/GJBC/21/Demo", "www.wrox.com", new Date("January 1, 2020"));
//刪除剛剛設置的 cookie
CookieUtil.unset("name", "/GJBC/21/Demo", "www.wrox.com");
//設置安全的 cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);
//假設 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
//取得全部子 cookie
//var data = SubCookieUtil.getAll("data");
//alert(data.name); //"Nicholas"
//alert(data.book); //"Professional JavaScript"
////逐個獲取子 cookie
//alert(SubCookieUtil.get("data", "name")); //"Nicholas"
//alert(SubCookieUtil.get("data", "book")); //"Professional JavaScript"
////假設 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
////設置兩個 cookie
//SubCookieUtil.set("data", "name", "Nicholas");
//SubCookieUtil.set("data", "book", "Professional JavaScript");
////設置全部子 cookie 和失效日期
//SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" },
//new Date("January 1, 2010"));
////修改名字的值，並修改 cookie 的失效日期
//SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010"));
////僅刪除名為 name 的子 cookie
//SubCookieUtil.unset("data", "name");
////刪除整個 cookie
//SubCookieUtil.unsetAll("data");
/*Web存儲機制 WebStorage最早在Web超文本應用技術工作組的Web應用1.0規範中描述的,WebStorage的目的是克服cookie帶來的一些限制,
當數據需要被嚴格控制在客戶端上時,無須持續地將數據發回服務器,WebStorage的兩個主要目標是
1、提供一種在cookie之外存儲會話數據的途徑
2、提供一種存儲大量可以跨會話存在的數據的機制
Storage類型提供最大的存儲空間(因瀏覽器而異)來存儲名值對,Storage的實例與其他對象類似,
Storage 類型只能存儲字符串。非字符串的數據在存儲之前會被轉換成字符串
Storage有以下方法
clear() ： 刪除所有值；Firefox 中沒有實現 。
getItem(name) ：根據指定的名字 name 獲取對應的值。
? key(index) ：獲得 index 位置處的值的名字。
? removeItem(name) ：刪除由 name 指定的名值對兒。
? setItem(name, value) ：為指定的 name 設置一個對應的值
sessionStorage 對象
sessionStorage 對象存儲特定於某個會話的數據，也就是該數據只保持到瀏覽器關閉。這個對象
就像會話 cookie，也會在瀏覽器關閉後消失。存儲在 sessionStorage 中的數據可以跨越頁面刷新而
存在，同時如果瀏覽器支持，瀏覽器崩潰並重啟之後依然可用（Firefox 和 WebKit 都支持，IE 則不行）。
*/
//使用方法存儲數據
sessionStorage.setItem("name", "Nicholas");
//使用屬性存儲數據
sessionStorage.book = "Professional JavaScript";
//使用方法讀取數據
var SessionStorageName = sessionStorage.getItem("name");
alert(SessionStorageName);
//使用屬性讀取數據
var bookStorage = sessionStorage.book;
alert(bookStorage);
/*還可以通過結果length屬性和key()方法來叠代sessionStorage中的值
它是這樣遍歷sessionStorage中的鍵值對,首先通過key()方法獲取指定位置上的名字,然後再通過getItem()找出對應改名字的值
還可以使用for-in循環來叠代SessionStorage中的值
*/
for (var i = 0, len = sessionStorage.length; i < len; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
console.log(key + "=" + value);
alert(key + "=" + value);
}
//for (var key in sessionStorage) {
// var value = sessionStorage.getItem(key);
// alert(key + "=" + value);
//}
//sessionStorage使用removeItem方法刪除一個值
sessionStorage.removeItem("book");
/*globalStorage對象,首先要指定那些域可以訪問該數據,可以通過方括號標記使用屬性來實現*/
/*在這裏，訪問的是針對域名 wrox.com 的存儲空間 */
//保存數據
globalStorage["wrox.com"].name = "Nicholas";
//獲取數據
var name = globalStorage["wrox.com"].name;
//這裏所指定的存儲空間只能由來自 www.wrox.com 的頁面訪問，其他子域名都不行。
//保存數據
globalStorage["www.wrox.com"].name = "Nicholas";
//獲取數據
var name = globalStorage["www.wrox.com"].name;
//存儲數據，任何人都可以訪問——不要這樣做！
globalStorage[""].name = "Nicholas";
//存儲數據，可以讓任何以.net 結尾的域名訪問——不要這樣做！
globalStorage["net"].name = "Nicholas";
//globalStorage 的每個屬性都是 Storage 的實例。因此，可以像如下代碼中這樣使用。
globalStorage["www.wrox.com"].name = "Nicholas";
globalStorage["www.wrox.com"].book = "Professional JavaScript";
globalStorage["www.wrox.com"].removeItem("name");
var book = globalStorage["www.wrox.com"].getItem("book");
//如果你事先不能確定域名，那麽使用 location.host 作為屬性名比較安全
globalStorage[location.host].name = "Nicholas";
var book = globalStorage[location.host].getItem("book");
/*如果不使用 removeItem() 或者 delete 刪除，或者用戶未清除瀏覽器緩存，存儲在globalStorage 屬性中的數據會一直保留在磁盤上。
這讓 globalStorage 非常適合在客戶端存儲文檔或者長期保存用戶偏好設置*/
/*localStorage對象必須來自同一個域名(子域名無效),使用同一種協議,在同一個端口上,這相當於globalStorage*/
//使用方法存儲數據
localStorage.setItem("name", "Nicholas");
//使用屬性存儲數據
localStorage.book = "Professional JavaScript";
//使用方法讀取數據
var name = localStorage.getItem("name");
//使用屬性讀取數據
var book = localStorage.book;
//為了兼容只支持 globalStorage 的瀏覽器，可以使用以下函數。
function getLocalStorage(){
if (typeof localStorage == "object"){
return localStorage;
} else if (typeof globalStorage == "object"){
return globalStorage[location.host];
} else {
throw new Error("Local storage not available.");
}
}
var storage = getLocalStorage();
</script>
JavaScript高級編程———數據存儲（cookie、WebStorage）