IE兼容之localStorage与cookie

当我们想要保存本地数据时，在ie中不支持localStorage。
这里写了一段同时兼容IE与chorme的代码
这里示例是本地保存图片。
bg1s.png是小图片
bg1.jpg是背景图。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #bigbox {
        width: 100px;
        height: 330px;
        border: 2px solid red;
    }
    #bigbox div a {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    </style>
</head>

<body>
    <div id="bigbox">
        <div>
            <a href="javascript:void(0)">
                <img src="bg1s.jpg" alt="1" data-src="bg1.jpg">
            </a>
        </div>
        <div>
            <a href="javascript:void(0)">
                <img src="bg2s.jpg" alt="2" data-src="bg2.jpg">
            </a>
        </div>
        <div>
            <a href="javascript:void(0)">
                <img src="bg3s.jpg" alt="3" data-src="bg3.jpg">
            </a>
        </div>
    </div>
    <script>
    var bigboxEle = document.getElementById('bigbox');
    var divEle = bigboxEle.getElementsByTagName('div');
    var key = "theme";

    for (var i = 0; i < divEle.length; i++) {
        console.log(i);
        divEle[i].onclick = function() {
            bigImg = this.getElementsByTagName('img')[0].getAttribute("data-src");
            saveImg(bigImg);
            document.body.style.background = "url(" + bigImg + ") no-repeat";
        }
    }

    function saveImg(tid) {
        if (window.localStorage) {
            localStorage.bg = tid;
        } else {
            db.setCookie(key, tid);
        }
    }

    function readImg() {
        if (window.localStorage) {
            bigImg = localStorage.bg;
            if (!localStorage.bg) {
                bigImg = "bg1.jpg";
            }
        } else {
            bigImg = db.getCookie(key);
            if (!db.getCookie(key)) {
                bigImg = "bg1.jpg";
            }
        }
        document.body.style.background = "url(" + bigImg + ") no-repeat";
    }
    var db = {
        //添加cookie
        setCookie: function(name, value) {
            var Days = 30;
            var date = new Date();
            date.setDate(date.getDate() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name + "=" + value + ";expires=" + date + ";SameSite=Strict";
        },
        //获得cookie
        getCookie: function(name) {
            var arr = document.cookie.split(";");
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split("=");
                if (arr2[0] == name) {
                    return arr2[1];
                }
            };
            return null;
        }
    }
    window.onload = function() {
        readImg();
    }
    </script>
</body>

</html>
运行示例
IE兼容之localStorage与cookie

猜你喜欢
