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

原文地址:https://www.cnblogs.com/Alex80/p/11313107.html