cookie和localStorage的示例分析

這篇文章主要介紹了cookie和localStorage的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

河?xùn)|網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

一、localStorage、cookie、sessionStorage的區(qū)別與練習(xí)

1、cookie 小甜餅。它的大小限制為4KB左右，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息，比如你登錄某個(gè)網(wǎng)站市場(chǎng)可以看到“記住密碼”，這通常就是通過(guò)在Cookie中存入一段辨別用戶身份的數(shù)據(jù)來(lái)實(shí)現(xiàn)的。

a、生命周期：通常為關(guān)閉瀏覽器的時(shí)間。如果想在關(guān)閉后還可以打開，可以給cookie設(shè)置失效時(shí)間

//具體操作cookie 
document.cookie = "name=value;expires=date;path=path；domain=domain; secure"//path路徑；domain同域名訪問(wèn);**secure**只將http轉(zhuǎn)為https加密傳輸（僅是服務(wù)器與客戶端之間）
　document.cookie  = 'username=Darren'//'username'表示 cookie 名稱，'Darren'表示這個(gè)名稱對(duì)應(yīng)的值。假設(shè) cookie 名稱并不存在，那么就是創(chuàng)建一個(gè)新的 cookie；如果存在就是修改了這個(gè) cookie 名稱對(duì)應(yīng)的值。
//cookie的存取 存取時(shí)必須要使用Document對(duì)象的 cookie 屬性；（from w3cschool）
function getCookie(c_name){
    if (document.cookie.length>0){　　//先判斷cookie是否為空，為空就return ""
        c_start=document.cookie.indexOf(c_name + "=")　　//通過(guò)String對(duì)象的indexOf()來(lái)檢查這個(gè)cookie是否存在，不存在就為 -1　　
        if (c_start!=-1){ 
           c_start=c_start + c_name.length+1　　//最后這個(gè)+1其實(shí)是表示"="號(hào)啦，這樣就獲取到了cookie值的開始位置
           c_end=document.cookie.indexOf(";",c_start)//indexOf()第二個(gè)參數(shù)表示指定的開始索引的位置...為了得到值的結(jié)束位置。因?yàn)樾枰紤]是否是最后一項(xiàng)，所以通過(guò)";"號(hào)是否存在來(lái)判斷
            if (c_end==-1) 
            c_end=document.cookie.length；　　
            return unescape(document.cookie.substring(c_start,c_end))//通過(guò)substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎(chǔ)，想了解的可以搜索下，在文章結(jié)尾處也會(huì)進(jìn)行講解cookie編碼細(xì)節(jié)
            //substring(indexStart[, indexEnd])截取一個(gè)字符串在開始索引到結(jié)束索引之間的一個(gè)子集, 或從開始索引直到字符串的末尾的一個(gè)子集。indexStart[, indexEnd]
           //escape()字符串轉(zhuǎn)義
} 
    }
return ""
}　　
//通過(guò)expires來(lái)設(shè)置 cookie 的有效期。語(yǔ)法如下：
　document.cookie = "name=value;expires=date"//data：GMT(格林威治時(shí)間)格式的日期型字符串
　var _date = new Date();
　_date.setDate(_date.getDate()+30);//30 是保存30天的意思
　_date.toGMTString();
　//函數(shù)封裝
　　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信息時(shí)不能包含空格，分號(hào)，逗號(hào)等特殊符號(hào)，而在一般情況下，cookie 信息的存儲(chǔ)都是采用未編碼的方式。所以，在設(shè)置 cookie 信息以前要先使用escape()函數(shù)將 cookie 值信息進(jìn)行編碼，在獲取到 cookie 值得時(shí)候再使用unescape()函數(shù)把值進(jìn)行轉(zhuǎn)換回來(lái)。如設(shè)置cookie時(shí)：

document.cookie = name + "="+ escape (value)

再看看基礎(chǔ)用法時(shí)提到過(guò)的getCookie()內(nèi)的一句：　

return unescape(document.cookie.substring(c_start,c_end))

這樣就不用擔(dān)心因?yàn)樵赾ookie值中出現(xiàn)了特殊符號(hào)而導(dǎo)致 cookie 信息出錯(cuò)了。

2、sessionStorage 和localStorage的用法

localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù)。
sessionStorage 用于臨時(shí)保存同一窗口(或標(biāo)簽頁(yè))的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)。
location是一直存在本地。sessionStorage是瀏覽器關(guān)閉后就立即清除。

localStorage局限性：
1、瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個(gè)屬性
2、目前所有的瀏覽器中都會(huì)把localStorage的值類型限定為string類型，這個(gè)在對(duì)我們?nèi)粘１容^常見的JSON對(duì)象類型需要一些轉(zhuǎn)換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡
5、localStorage不能被爬蟲抓取到
6、相比于cookie可以節(jié)約帶寬，但是這個(gè)卻是只有在高版本的瀏覽器中才支持的

//用法
var  students = {
    xiaomin: {
    name: "xiaoming",
    grade: 1
    },
teemo: {
    name: "teemo",
    grade: 3
  }
}
students = JSON.stringify(students); //將JSON轉(zhuǎn)為字符串存到變量里
console.log(students);
localStorage.setItem("students",students);//將變量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //轉(zhuǎn)為JSON
console.log(newStudents); // 打印出原先對(duì)象

常用API

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“cookie和localStorage的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)標(biāo)題：cookie和localStorage的示例分析
轉(zhuǎn)載來(lái)源：http://muchs.cn/article22/pdgjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、網(wǎng)站制作、外貿(mào)建站、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)