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
1

GitHub地址（记得给星哦）
https://github.com/shiguang0116/sg-utils

系列文章
JavaScript工具类

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用法实例