首页 > 代码库 > localStroage的用法

localStroage的用法

2024-08-13 22:56:55   219人阅读

Cookie

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

LocalStorage

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

SessionStorage

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

三者异同点：
特性CookielocalStoragesessionStorage
数据的生命期一般由服务器生成，可设置失效时间。如果在浏览器端生成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 = http://www.mamicode.com/‘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的操作…

 

localStroage的用法


联系
我们