當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

cookie对比localStorage哪个适合作为网站皮肤存储

發(fā)布時(shí)間：2024/10/12 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 cookie对比localStorage哪个适合作为网站皮肤存储小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

cookie對(duì)比localStorage哪個(gè)適合作為網(wǎng)站皮膚存儲(chǔ)

cookie

cookie :?一般由服務(wù)器生成，可設(shè)置失效時(shí)間。如果在瀏覽器生成，默認(rèn)是關(guān)閉瀏覽器之后失效

　　　　存儲(chǔ)大小：4k

　　　　每次都會(huì)攜帶在HTTP頭中，如果使用?cookie?保存過(guò)多數(shù)據(jù)會(huì)帶來(lái)性能問(wèn)題

　　　　一般由服務(wù)器端生成，用于標(biāo)識(shí)用戶身份

缺點(diǎn) ：原生的cookie用起來(lái)有點(diǎn)麻煩，如果用jQuery，則需要引入jquery庫(kù)及jquery.cookie庫(kù)

優(yōu)點(diǎn) ：兼容性比較好，對(duì)IE瀏覽器也很好兼容，可兼容IE6，厲害了我的哥

需要注意：??本地支持cookie的瀏覽器有： IE6+,火狐（目前測(cè)試過(guò)這些瀏覽器）

　　　　　　不支持的瀏覽器有：360瀏覽器，谷歌瀏覽器，歐朋瀏覽器（目前測(cè)試過(guò)這些瀏覽器）

　　　　　　但是把文件放到，瀏覽器中都有很好的支持

cookie調(diào)用方式?

新添加一個(gè)會(huì)話cookie：$.cookie('the_cookie', 'the_value'); 注：當(dāng)沒(méi)有指明cookie有效時(shí)間時(shí)，所創(chuàng)建的cookie有效期默認(rèn)到用戶關(guān)閉瀏覽器為止，所以被稱為“會(huì)話cookie（session cookie）”創(chuàng)建一個(gè)cookie并設(shè)置有效時(shí)間為7天:$.cookie('the_cookie', 'the_value', { expires: 7 }); 注：當(dāng)指明了cookie有效時(shí)間時(shí)，所創(chuàng)建的cookie被稱為“持久cookie（persistent cookie）”。創(chuàng)建一個(gè)cookie并設(shè)置cookie的有效路徑： $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' }); 注：在默認(rèn)情況下，只有設(shè)置cookie的網(wǎng)頁(yè)才能讀取該cookie。如果想讓一個(gè)頁(yè)面讀取另一個(gè)頁(yè)面設(shè)置的cookie，必須設(shè)置cookie的路徑。 cookie的路徑用于設(shè)置能夠讀取cookie的頂級(jí)目錄。將這個(gè)路徑設(shè)置為網(wǎng)站的根目錄，可以讓所有網(wǎng)頁(yè)都能互相讀取cookie（一般不要這樣設(shè)置，防止出現(xiàn)沖突）讀取cookie: $.cookie('the_cookie'); // cookie存在 => 'the_value' $.cookie('not_existing'); // cookie不存在 => null 刪除cookie，通過(guò)傳遞null作為cookie的值即可： $.cookie('the_cookie', null);

localStorage

LocalStorage :?除非被清楚，否則永久保存

　　　　一般?5MB

　　　　僅在客戶端中保存，不參與和服務(wù)器的通信。

　　　　用于瀏覽器端緩存數(shù)據(jù)

缺點(diǎn) ：對(duì)IE瀏覽器有兼容性問(wèn)題，官網(wǎng)說(shuō)能兼容IE8+，可我的瀏覽器IE10也沒(méi)有效果，到現(xiàn)在還未解決此問(wèn)題，如果有人知道，請(qǐng)留言告知我，謝謝

優(yōu)點(diǎn) : 用起來(lái)非常簡(jiǎn)單，直接申明變量即可

需要注意：經(jīng)過(guò)測(cè)試：在本地中IE所有瀏覽器均不支持LocalStorage,其他瀏覽器都支持

　　　　　部署到服務(wù)器中，IE8及IE8以上都支持LocalStorage

如果對(duì)IE沒(méi)有很高的要求建議用LocalStorage，如果對(duì)IE有高要求那么建議用LocalStorage，因人而異

原理：通過(guò)改變link中的href路徑，達(dá)到主題切換效果

LocalStorage?調(diào)用方式

localStorage.setItem("key","value");//存儲(chǔ)變量名為key，值為value的變量 localStorage.key = "value"//存儲(chǔ)變量名為key，值為value的變量 localStorage.getItem("key");//獲取存儲(chǔ)的變量key的值www.it165.net localStorage.key;//獲取存儲(chǔ)的變量key的值 localStorage.removeItem("key")//刪除變量名為key的存儲(chǔ)變量

效果圖：

點(diǎn)擊不同的色塊，字體會(huì)變成不一樣的顏色

運(yùn)行我的dom之前，請(qǐng)?jiān)诋?dāng)前目錄下新建一個(gè)css文件，然后在css文件中鍵入5個(gè)css主題文件

css文件

樣式內(nèi)容

localStorage技術(shù)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>theme - localStorage</title> <style>*{margin: 0;padding: 0}.theme-style{overflow: hidden;margin: auto;width: 300px;}.theme-style li{display: inline-block;width: 50px;height: 50px;margin-right: 0.5em;float: left;cursor: pointer}.box{width: 400px;margin: auto;line-height: 40px;}.theme-style li:nth-child(1){background: red}.theme-style li:nth-child(2){background: green} .theme-style li:nth-child(3){background:yellow} .theme-style li:nth-child(4){background: pink} .theme-style li:nth-child(5){background: orange} </style> </head> <body> <ul id="theme-style" class="theme-style"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="box"> <p>上周五下午三點(diǎn)收到一個(gè)沙特客戶鋼制更衣柜的詢價(jià). 嚴(yán)格意義上也算個(gè)老客戶，兩年前下過(guò)一個(gè)訂單. 當(dāng)時(shí)收到貨后還比較滿意，曾經(jīng)有意向要做沙特的代理，后來(lái)因?yàn)榻?jīng)濟(jì)情況不了了之.</p> </div> </body> </html> <script> //自動(dòng)加載加入節(jié)點(diǎn) var link = document.createElement('link'); var head = document.getElementsByTagName('head')[0]; link.rel = 'stylesheet'; link.id = 'theme'; localStorage.getItem('url') ? link.href = localStorage.getItem('url') : link.href = 'css/red.css'; head.appendChild(link) //獲取內(nèi)聯(lián)樣式 function getCss(obj,name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return document.defaultView.getComputedStyle(obj,null)[name]; } } var arr = ['red' , 'green' , 'yellow' , 'pink' , 'orange']; var themeStyle = document.getElementById('theme-style').getElementsByTagName('li'); var link = document.getElementById('theme'); //更換樣式 for(var i = 0 ; i < themeStyle.length ; i++ ){ (function(number){ themeStyle[i].onclick = function(){ localStorage.setItem('url','css/'+arr[number]+'.css'); link.setAttribute('href',localStorage.getItem('url')); } })(i); } </script>

cookie技術(shù)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>theme - localStorage</title><script src="js/jquery-3.2.1.min.js"></script><script src="js/jquery.cookie.js"></script> <style>*{margin: 0;padding: 0}.theme-style{overflow: hidden;margin: auto;width: 300px;}.theme-style li{display: inline-block;width: 50px;height: 50px;margin-right: 0.5em;float: left;cursor: pointer}.box{width: 400px;margin: auto;line-height: 40px;}.theme-style li:nth-child(1){background: red}.theme-style li:nth-child(2){background: green} .theme-style li:nth-child(3){background:yellow} .theme-style li:nth-child(4){background: pink} .theme-style li:nth-child(5){background: orange} </style> </head> <body> <ul id="theme-style" class="theme-style"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="box"> <p>上周五下午三點(diǎn)收到一個(gè)沙特客戶鋼制更衣柜的詢價(jià). 嚴(yán)格意義上也算個(gè)老客戶，兩年前下過(guò)一個(gè)訂單. 當(dāng)時(shí)收到貨后還比較滿意，曾經(jīng)有意向要做沙特的代理，后來(lái)因?yàn)榻?jīng)濟(jì)情況不了了之.</p> </div> </body> </html> <script> //自動(dòng)加載加入節(jié)點(diǎn) var link = document.createElement('link'); var head = document.getElementsByTagName('head')[0]; link.rel = 'stylesheet'; link.id = 'theme'; $.cookie('url') ? link.href = $.cookie('url') : link.href = 'css/red.css'; head.appendChild(link) //獲取內(nèi)聯(lián)樣式 function getCss(obj,name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return document.defaultView.getComputedStyle(obj,null)[name]; } } var arr = ['red' , 'green' , 'yellow' , 'pink' , 'orange']; var themeStyle = document.getElementById('theme-style').getElementsByTagName('li'); var link = document.getElementById('theme'); //更換樣式 for(var i = 0 ; i < themeStyle.length ; i++ ){ (function(number){ themeStyle[i].onclick = function(){ $.cookie('url','css/'+arr[number]+'.css' , { expires: 30 }) link.setAttribute('href',$.cookie('url')); } })(i); } </script>

轉(zhuǎn)載于:https://www.cnblogs.com/yz-blog/p/6704838.html

總結(jié)

以上是生活随笔為你收集整理的cookie对比localStorage哪个适合作为网站皮肤存储的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：我国哪些城市冬暖夏凉？
下一篇： NOIP2013Day1T3 表示只能过