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>
<!--<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>
愿你走出半生，归来仍是少年
