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