localStroage的用法

Cookie

每个域名存储量比较小（各浏览器不同，大致4K）
所有域名的存储量有限制（各浏览器不同，大致4K）
有个数限制（各浏览器不同）
会随请求发送到服务器

LocalStorage

永久存储
单个域名存储量比较大（推荐5MB，各浏览器不同）
总体数量无限制浏览器关闭不清除。页面之间可以实现共享。同一域名下实现共享只要不清除。可以在本地永久储存。

SessionStorage

只在 Session 内有效
存储量更大（推荐没有限制，但是实际上各浏览器也不同）浏览器关闭则清除。不同的窗口之间不能共享。同一域名下实现共享

三者异同点：

示例代码一：

var body = document.body;
        var pcolor = document.querySelector(‘p‘);
        var clear = document.querySelector(‘#clear‘);

        var bgcolorForm = document.querySelector(‘#bgcolor‘);
        var colorFrom = document.querySelector(‘#fcolor‘);

        if(!localStorage.getItem(‘bgcolor‘)){
            populateStorage();
        }else{
            setStyle();
        }

        function populateStorage(){
            localStorage.setItem(‘bgcolor‘,bgcolorForm.value);
            localStorage.setItem(‘color‘,colorFrom.value);
            setStyle();
        }
        function setStyle(){
            var currentBgColor = localStorage.getItem(‘bgcolor‘);
            var currentColor = localStorage.getItem(‘color‘);

            bgcolorForm.value = currentBgColor;
            colorFrom.value = currentColor;

            body.style.backgroundColor = currentBgColor;
            pcolor.style.color = currentColor;
        }
        function clearFn(){
            localStorage.clear();
        }
        bgcolorForm.addEventListener(‘change‘,populateStorage,false);
        colorFrom.addEventListener(‘change‘,populateStorage,false);
        clear.addEventListener(‘click‘,clearFn,false);

示例代码二：

function unlock(i, station_name_cn, station_name_en) {
        var locking = localStorage.getItem(‘lock‘);
        if (locking && locking == 1) {
            localStorage.setItem("lock", i);
            // console.log(localStorage.getItem(‘lock‘));
            window.location.href = ‘unlock.html?‘ + station_name_cn + ‘-‘ + station_name_en;
        }
    }

if (station_id > 1) {
            if (!localStorage.getItem(‘lock‘) || localStorage.getItem(‘lock‘) != station_id) {
                localStorage.setItem("lock", 1);
            }
            // unlock(station_id,station_name_cn,station_name_en);
        }

参考资料：

MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API


详说 Cookie, LocalStorage 与 SessionStorage

HTML5本地存储localStorage和sessionStorage…

js对cookie的操作…