localStroage的用法

Posted 2020-08-09 黑客

Cookie

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

LocalStorage

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

SessionStorage

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

三者异同点：

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

示例代码一：

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的操作…