cookie对比localStorage哪个适合作为网站皮肤存储
生活随笔
收集整理的這篇文章主要介紹了
cookie对比localStorage哪个适合作为网站皮肤存储
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
cookie對比localStorage哪個(gè)適合作為網(wǎng)站皮膚存儲(chǔ)
cookie
cookie :?一般由服務(wù)器生成，可設(shè)置失效時(shí)間。如果在瀏覽器生成，默認(rèn)是關(guān)閉瀏覽器之后失效
存儲(chǔ)大小：4k
每次都會(huì)攜帶在HTTP頭中，如果使用?cookie?保存過多數(shù)據(jù)會(huì)帶來性能問題
一般由服務(wù)器端生成，用于標(biāo)識(shí)用戶身份
缺點(diǎn) ： 原生的cookie用起來有點(diǎn)麻煩，如果用jQuery，則需要引入jquery庫及jquery.cookie庫
優(yōu)點(diǎn) ： 兼容性比較好，對IE瀏覽器也很好兼容，可兼容IE6，厲害了我的哥
需要注意 ：??本地支持cookie的瀏覽器有 ： IE6+,火狐（目前測試過這些瀏覽器）
不支持的瀏覽器有：360瀏覽器，谷歌瀏覽器，歐朋瀏覽器（目前測試過這些瀏覽器）
但是把文件放到，瀏覽器中都有很好的支持
?
cookie調(diào)用方式?
新添加一個(gè)會(huì)話cookie：$.cookie('the_cookie', 'the_value'); 注：當(dāng)沒有指明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)頁才能讀取該cookie。如果想讓一個(gè)頁面讀取另一個(gè)頁面設(shè)置的cookie，必須設(shè)置cookie的路徑。 cookie的路徑用于設(shè)置能夠讀取cookie的頂級(jí)目錄。將這個(gè)路徑設(shè)置為網(wǎng)站的根目錄，可以讓所有網(wǎng)頁都能互相讀取cookie（一般不要這樣設(shè)置，防止出現(xiàn)沖突）讀取cookie: $.cookie('the_cookie'); // cookie存在 => 'the_value' $.cookie('not_existing'); // cookie不存在 => null 刪除cookie，通過傳遞null作為cookie的值即可： $.cookie('the_cookie', null);?
localStorage
LocalStorage :?除非被清楚，否則永久保存
一般?5MB
僅在客戶端中保存，不參與和服務(wù)器的通信。
用于瀏覽器端緩存數(shù)據(jù)
缺點(diǎn) ： 對IE瀏覽器有兼容性問題，官網(wǎng)說能兼容IE8+，可我的瀏覽器IE10也沒有效果，到現(xiàn)在還未解決此問題，如果有人知道，請留言告知我，謝謝
優(yōu)點(diǎn) : 用起來非常簡單，直接申明變量即可
需要注意 ：經(jīng)過測試：在本地中IE所有瀏覽器均不支持LocalStorage,其他瀏覽器都支持
部署到服務(wù)器中，IE8及IE8以上都支持LocalStorage
?
如果對IE沒有很高的要求建議用LocalStorage，如果對IE有高要求那么建議用LocalStorage，因人而異
原理 ： 通過改變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之前，請?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><!--<link rel="stylesheet" id = "theme" href="css/green.css">--> <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è)老客戶，兩年前下過一個(gè)訂單. 當(dāng)時(shí)收到貨后還比較滿意，曾經(jīng)有意向要做沙特的代理，后來因?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><!--<link rel="stylesheet" id = "theme" href="css/green.css">--> <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è)老客戶，兩年前下過一個(gè)訂單. 當(dāng)時(shí)收到貨后還比較滿意，曾經(jīng)有意向要做沙特的代理，后來因?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哪个适合作为网站皮肤存储的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我国哪些城市冬暖夏凉？
- 下一篇： NOIP2013Day1T3 表示只能过