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><!--<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>上周五下午三点收到一个沙特客户钢制更衣柜的询价. 严格意义上也算个老客户，两年前下过一个订单. 当时收到货后还比较满意，曾经有意向要做沙特的代理，后来因为经济情况不了了之.</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><!--<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>上周五下午三点收到一个沙特客户钢制更衣柜的询价. 严格意义上也算个老客户，两年前下过一个订单. 当时收到货后还比较满意，曾经有意向要做沙特的代理，后来因为经济情况不了了之.</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