封装 localstorage 的作用是什么?

主要是在编写的时候代码上的差别，如果你使用的比较频繁，稍微进行一次封装是会在后续给你带来无比流畅的体验。
localStorage 原生读取是 window.localStorage.getItem(key)，写入是 window.localStorage.setItem(key, value)，如果我进行一个简单封装：

function storage(key, value) {
    if (!key) {
        return;
    }
    if (value === undefined) {
        return window.localStorage.getItem(key);
    }
    return window.localStorage.setItem(key, value);
}

封装后的 localStorage 读取是 storage(key) ，写入是 storage(key, value)。
但是上面的封装存在一些问题，比如说不能存储数组，存储正数型数字后读取的结果为字符串型数字，意味着绝对判断结果为假，所以这里可以再进一步进行封装：

function storage(key, value) {
    if (!key) {
        return;
    }
    if (value === undefined) {
        return JSON.parse(window.localStorage.getItem(key));
    }
    return window.localStorage.setItem(key, JSON.stringify(value));
}

很好，这下也可以保存字符类型以及数组了。
但是还是存在问题，因为 localStorage 在相同域名下是共用相同的存储区，如果你使用的键名太短，可能会导致业务冲突，所以这里再进一步进行封装，加入自动添加前缀：

function storage(key, value) {
    if (!key) {
        return;
    }
    if (window.prefix !== undefined) {
        key = window.prefix + ":" + key;
    }
    if (value === undefined) {
        return JSON.parse(window.localStorage.getItem(key));
    }
    return window.localStorage.setItem(key, JSON.stringify(value));
}

这下就没问题了吗？不是的，因为以上只是简单的例子，比如其中没有判断 key 是否为字符串的动作，和原生 localStorage 一样不支持 TTL（Time to live）等等。
合理的封装浏览器方法可以让你处理业务事半功倍，熟读对方的代码后才可以理解对方的用意。

localStorage 只能存字符串,想要存一个对象或者数组,就需要进行序列化,取出的时候要进行反序列化,比较繁琐,所以需要分装,推荐一个轮子marcuswestin/store