當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/10/12 编程问答 41 豆豆

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

cookie對比localStorage哪個適合作為網站皮膚存儲

cookie

cookie :?一般由服務器生成，可設置失效時間。如果在瀏覽器生成，默認是關閉瀏覽器之后失效

　　　　存儲大小：4k

　　　　每次都會攜帶在HTTP頭中，如果使用?cookie?保存過多數據會帶來性能問題

　　　　一般由服務器端生成，用于標識用戶身份

缺點：原生的cookie用起來有點麻煩，如果用jQuery，則需要引入jquery庫及jquery.cookie庫

優點：兼容性比較好，對IE瀏覽器也很好兼容，可兼容IE6，厲害了我的哥

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

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

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

cookie調用方式?

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

localStorage

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

　　　　一般?5MB

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

　　　　用于瀏覽器端緩存數據

缺點：對IE瀏覽器有兼容性問題，官網說能兼容IE8+，可我的瀏覽器IE10也沒有效果，到現在還未解決此問題，如果有人知道，請留言告知我，謝謝

優點 : 用起來非常簡單，直接申明變量即可

需要注意：經過測試：在本地中IE所有瀏覽器均不支持LocalStorage,其他瀏覽器都支持

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

如果對IE沒有很高的要求建議用LocalStorage，如果對IE有高要求那么建議用LocalStorage，因人而異

原理：通過改變link中的href路徑，達到主題切換效果

LocalStorage?調用方式

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

效果圖：

點擊不同的色塊，字體會變成不一樣的顏色

運行我的dom之前，請在當前目錄下新建一個css文件，然后在css文件中鍵入5個css主題文件

css文件

樣式內容

localStorage技術

<!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>上周五下午三點收到一個沙特客戶鋼制更衣柜的詢價. 嚴格意義上也算個老客戶，兩年前下過一個訂單. 當時收到貨后還比較滿意，曾經有意向要做沙特的代理，后來因為經濟情況不了了之.</p> </div> </body> </html> <script> //自動加載加入節點 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) //獲取內聯樣式 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技術

<!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>上周五下午三點收到一個沙特客戶鋼制更衣柜的詢價. 嚴格意義上也算個老客戶，兩年前下過一個訂單. 當時收到貨后還比較滿意，曾經有意向要做沙特的代理，后來因為經濟情況不了了之.</p> </div> </body> </html> <script> //自動加載加入節點 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) //獲取內聯樣式 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>

轉載于:https://www.cnblogs.com/yz-blog/p/6704838.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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