localStorage

js-存储

localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

封装localStorage

/**
 * 保存数据到本地
 * 参数
        name  localStorage的名称
        data  存储数据
        isTrue  true-同页面可以监听，false-同页面无法监听
 */
function setLocalStorage(name,data,isTrue){
    if(isTrue){
        var orignalSetItem = window.localStorage.setItem;
        window.localStorage.setItem = function(key,newValue){
            var setItemEvent = new Event("setItemEvent");
            setItemEvent.newValue = newValue;
            setItemEvent.key = key;
            window.dispatchEvent(setItemEvent);
            orignalSetItem.apply(this,arguments);
        }
    }
    window.localStorage.setItem(name, data);
}
/**
 * 从本地存储获取数据
 * 参数
        name localStorage的名称
 */
function getLocalStorage(name){
    return localStorage.getItem(name)
}
/**
 * 本地存储中删除某个保存的数据
 * 参数
        name localStorage的名称
 */
function delLocalStorage(name){
    window.localStorage.removeItem(name);
}
// 清空localStorage
function clearLocalStorage(){
    window.localStorage.clear();
}
/**
 * 监听localStorage的变化
 * 参数
        callback 回调
        isTrue  true-监听当前页面，false-监听其他页面
 */
function listenLocalStorage(callback,isTrue){
    if(isTrue){
        window.addEventListener("setItemEvent", function (e) {
            // console.log(e);
            // console.log('key', e.key);
            // console.log('oldValue', e.oldValue);
            // console.log('newValue', e.newValue);
            // console.log('url', e.url);
            callback(e)
      });
    }else{
        window.addEventListener("storage", function (e) {
            // console.log('key', e.key);
            // console.log('oldValue', e.oldValue);
            // console.log('newValue', e.newValue);
            // console.log('url', e.url);
            callback(e)
        })
    }
}

作者 wendy
2019 年 5月 23日

参考文献