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>