html5 storage 测试

localStorage,sessionStorage测试

by weiming le

HTML

<div class="wrapper1">
    <p class="selected-info">你选中的是：<span></span>

    </p>
    <button class="a">a</button>
    <button class="b">b</button>
</div>
<div class="wrapper2">
    <p class="selected-info">你选中的是：<span></span>

    </p>
    <button class="a">a</button>
    <button class="b">b</button>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font: 12px/1.5 arail;
}
ul {
    list-style: none;
}
.wrapper1, .wrapper2 {
    padding: 20px;
}
button {
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #eee;
    height: 22px;
    cursor: pointer;
}
button.current {
    border: 1px solid orange;
    color: #333;
}
p {
    line-height: 2;
    font-size: 14px;
}

JavaScript

(function (window, $, undefined) {
    $(function () {
        // sessionStorage
        var setSelected = function (sOpt) {
            if (window.sessionStorage) {
                sessionStorage.setItem('selectedName', sOpt);
            }
        };
        var f1 = function () {
            $(this).addClass('current').siblings().removeClass('current');
            var selectS = $(this).text();
            setSelected(selectS);
        };

        $('.wrapper1 button').on('click', f1);
        setInterval(function () {
            var selectedS = sessionStorage.getItem('selectedName') || '';
            $('.wrapper1 .selected-info span').text(selectedS); !! selectedS && $('.wrapper1 button:contains("' + selectedS + '")').addClass('current');
        }, 300);
    });
    // localStorage 测试
    $(function () {
        var setSelected = function (sOpt) {
            if (window.localStorage) {
                localStorage.setItem('selectedName', sOpt);
            }
        };
        var f1 = function () {
            $(this).addClass('current').siblings().removeClass('current');
            var selectS = $(this).text();
            setSelected(selectS);
        };
        $('.wrapper2 button').on('click', f1);
        setInterval(function () {
            var selectedS = localStorage.getItem('selectedName') || '';
            $('.wrapper2 .selected-info span').text(selectedS); !! selectedS && $('.wrapper2 button:contains("' + selectedS + '")').addClass('current');
        }, 300);
    });
})(window, jQuery);