封装localStorage的存取

1. 代码

// 用变量的方式书写 更加可控
const namespace = 'mall';

// 设置 传递key value
function setItem (key, value){
    // 是否存在这个属性
    const storage = window.localStorage.getItem(namespace);

    // 反正要转成对象
    if(!storage){
        storage = {};
    } else {
        storage = JSON.parse(storage);
    }

    // 设置好健值
    storage[key] =  value;
    window.localStorage.setItem(namespace, JSON.stringify(storage));
}

// 获取  传递想要获取的哪个key的值
function getItem (key, def){ // def默认值
    const storage = window.localStorage.getItem(namespace);

    // 如果没有值呢
    if(!storage){
        return def;
    }

    // 转成对象
    storage = JSON.parse(storage);

    // 根据key 拿到value
    const res = storage[key];
    return res || def;
}

2. 解说

2.1. 命名空间

localStorage可能被不同的项目使用，用特殊的key来区分项目，就是命名空间

2.2. localStorage中的是字符串

从localStorage中读取出来的是字符串，要通过JSON.parse()解析成对象这样才能使用

->

在localStorage中的是字符串，拿出来要变成对象，再次存进去要变成字符串

2.3. 使用

保存在localStorage

读取localStorage，刷新页面，页面仍然保留上次的选择