JavaScript工具类（三）：localStorage本地储存

localStorage

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

一、常用属性

属性	描述
length	返回存储对象中包含多少条数据。

二、常用方法

方法	描述
key(n)	返回存储对象中第 n 个键的名称
getItem(keyname)	返回指定键的值
setItem(keyname, value)	添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)	移除键
clear()	清除存储对象中所有的键

三、localStorage 方法封装

基于以下两个原因，我们需要进行二次封装：

• android 原生系统老系统不支持 localStorage 对象，需要兼容处理。

• setItem() 方法不支持存储对象，需要处理。

u.storage = {};
    
/**
 * @description 获取localStorage对象，兼容android（android原生系统老系统不支持localstorage）
 * @return localStorage对象
 */
function uzStorage() {
    var ls = window.localStorage;
    var isAndroid = (/android/gi).test(window.navigator.appVersion);
    if (isAndroid) ls = os.localStorage();
    return ls;
}

设置本地储存

/**
 * @description 设置本地储存
 * @param {String} key 储存的名字
 * @param {*} value 储存的值
 */
u.storage.set = function (key, value) {
    var v = value;
    if (typeof v === 'object') {
        v = JSON.stringify(v);
        v = 'obj-' + v;
    }
    var ls = uzStorage();
    if (ls) ls.setItem(key, v);
};

获取本地储存

/**
 * @description 获取本地储存的数据
 * @param {String} key 要获取的数据对应的名字
 * @return {*}
 */
u.storage.get = function (key) {
    var ls = uzStorage();
    if (ls) {
        var v = ls.getItem(key);
        if (!v) return;
        if (v.indexOf('obj-') === 0) return JSON.parse(v.slice(4));
        else return v;
    }
};

删除本地储存中的某些数据

/**
 * @description 删除本地储存中某些数据
 * @param {String} key 要删除的数据对应的名字
 */
u.storage.remove = function (key) {
    var ls = uzStorage();
    if (ls && key) ls.removeItem(key);
};

清空本地储存所有数据

/**
 * @description 清空本地储存的所有数据
 */
u.storage.clear = function () {
    var ls = uzStorage();
    if (ls) ls.clear();
};

下载

npm i sg-utils -S

GitHub地址（记得给星哦）

https://github.com/shiguang0116/sg-utils

系列文章

JavaScript工具类（一）：util.js创建及上传
JavaScript工具类（二）：cookie缓存
JavaScript工具类（三）：localStorage本地储存
JavaScript工具类（四）：数据类型
JavaScript工具类（五）：string字符串
JavaScript工具类（六）：number数字
JavaScript工具类（七）：array数组
JavaScript工具类（八）：object对象
JavaScript工具类（九）：date日期
JavaScript工具类（十）：base64编码、解码
JavaScript工具类（十一）：浏览器、移动端类型
JavaScript工具类（十二）：validate表单验证
JavaScript工具类（十三）：url路径处理
JavaScript工具类（十四）：json数据格式
JavaScript工具类：util.js用法实例