一、localStorage、cookie、sessionStorage的區別與練習
1、cookie 小甜餅。它的大小限制為4KB左右，是網景公司的前雇員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在Cookie中存入一段辨別用戶身份的數據來實現的。
a、生命周期：通常為關閉瀏覽器的時間。如果想在關閉后還可以打開，可以給cookie設置失效時間
//具體操作cookie
document.cookie = "name=value;expires=date;path=path；domain=domain; secure"//path路徑；domain同域名訪問;**secure**只將http轉為https加密傳輸（僅是服務器與客戶端之間）
document.cookie = 'username=Darren'//'username'表示 cookie 名稱，'Darren'表示這個名稱對應的值。假設 cookie 名稱并不存在，那么就是創建一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應的值。
//cookie的存取 存取時必須要使用Document對象的 cookie 屬性；（from w3cschool）
function getCookie(c_name){
if (document.cookie.length>0){ //先判斷cookie是否為空，為空就return ""
c_start=document.cookie.indexOf(c_name + "=") //通過String對象的indexOf()來檢查這個cookie是否存在，不存在就為 -1
if (c_start!=-1){
c_start=c_start + c_name.length+1 //最后這個+1其實是表示"="號啦，這樣就獲取到了cookie值的開始位置
c_end=document.cookie.indexOf(";",c_start)//indexOf()第二個參數表示指定的開始索引的位置...為了得到值的結束位置。因為需要考慮是否是最后一項，所以通過";"號是否存在來判斷
if (c_end==-1)
c_end=document.cookie.length；
return unescape(document.cookie.substring(c_start,c_end))//通過substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎，想了解的可以搜索下，在文章結尾處也會進行講解cookie編碼細節
//substring(indexStart[, indexEnd])截取一個字符串在開始索引到結束索引之間的一個子集, 或從開始索引直到字符串的末尾的一個子集。indexStart[, indexEnd]
//escape()字符串轉義
}
}
return ""
}
//通過expires來設置 cookie 的有效期。語法如下：
document.cookie = "name=value;expires=date"//data：GMT(格林威治時間)格式的日期型字符串
var _date = new Date();
_date.setDate(_date.getDate()+30);//30 是保存30天的意思
_date.toGMTString();
//函數封裝
function setCookie(c_name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" :";expires="+exdate.toGMTString());
}
//使用方法
setCookie('username','changlin',30)
在輸入cookie信息時不能包含空格，分號，逗號等特殊符號，而在一般情況下，cookie 信息的存儲都是采用未編碼的方式。所以，在設置 cookie 信息以前要先使用escape()函數將 cookie 值信息進行編碼，在獲取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設置cookie時：
document.cookie = name + "="+ escape (value)
再看看基礎用法時提到過的getCookie()內的一句：
return unescape(document.cookie.substring(c_start,c_end))
這樣就不用擔心因為在cookie值中出現了特殊符號而導致 cookie 信息出錯了。
2、sessionStorage 和localStorage的用法
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
sessionStorage 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
location是一直存在本地。sessionStorage是瀏覽器關閉后就立即清除。
localStorage局限性：
1、瀏覽器的大小不統一，并且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
5、localStorage不能被爬蟲抓取到
6、相比于cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
//用法
var students = {
xiaomin: {
name: "xiaoming",
grade: 1
},
teemo: {
name: "teemo",
grade: 3
}
}
students = JSON.stringify(students); //將JSON轉為字符串存到變量里
console.log(students);
localStorage.setItem("students",students);//將變量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //轉為JSON
console.log(newStudents); // 打印出原先對象
常用API
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
