Js自行封装一个 Storge第三方库.

尝试使用 localstorge 自己封装一个库

//  localStorage  function
/***** @param {*} key 键* @param {*} nullValue 空值的情况下* @returns*/
export function getItem(key, nullValue) {const res = JSON.parse(window.localStorage.getItem(key))return res ? res : nullValue
}/***** @param {*} key 键* @param {*} value 值*/
export function saveItem(key, value) {window.localStorage.setItem(key, JSON.stringify(value))
}/**** * @param {删除key对应的值} key* @returns*/
export function clearItem(key){window.localStorage.removeItem(key);return [];
}// 插入值   永远插入到最前面
function insertItem(oldList, value, compare, maxLength){// 如果之前的数据是空的if(oldList.length === 0){oldList.unshift(value);return;}// 如果里面有数据的话， 看看这个传入的这个数据在不在列表里面const index = oldList.findIndex(compare);if(index === 0){// 如果直接在头部return}if(index > 0){oldList.splice(index, 1);}// 如果不在里面oldList.unshift(value)// 限制长度if(oldList && maxLength && oldList.length > maxLength){oldList.slice(0, maxLength);}
}export function delItem(oldList, compare){if(oldList.length === 0){return;}const index = oldList.findIndex(compare)if(index > -1){oldList.splice(index, 1);}else{return}}/***** @export* @param {*} key 键* @param {*} value  值* @param {*} compare 比较函数 用来确定具体的值* @param {number} [maxLength=100]  最大值 默认 100*/
export function saveStorage(key,  value,  compare, maxLength = 100) {const oldList = getItem(key, []);//  将数据插入到 传入的数组中insertItem(oldList, value, compare, maxLength);// 保存数据saveItem(key, oldList)return oldList;}export function removeStorage(key, compare){const oldList = getItem(key, []);delItem(oldList,  compare)return oldList;
}export function loadStorage(key, nullValue){return getItem(key, nullValue)
}

Js自行封装一个 Storge第三方库.相关推荐

CocoaPods一个Objective-C第三方库的管理利器
2019独角兽企业重金招聘Python工程师标准>>> 介绍: 开发应用的时候第三方的库是不可缺少的,能提高开发的效率. 一些经常用到的库,在新的项目里用是,你又得手工的Add到项目 ...
[js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展字符串位置方法(4)
本文,我们接着之前的框架继续扩展,这次扩展了一共有5个与字符串位置相关的方法 between( left, right ) 返回两个字符串之间的内容, 如果第二个参数没有传递,返回的是找到的第一个参数 ...
[js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展trim,trimLeft,trimRight方法(2)
我们接着上一篇的继续,在上一篇我们完成了工具库的架构,本文扩展字符串去空格的方法, 一共有3个 1,trimLeft: 去除字符串左边的空格 2,trimRight: 去除字符串右边的空格 3,tri ...
浅析jQuery原理并仿写封装一个自己的库
[前言]最近项目忙的脚不沾地,刚刚结束,准备整理一下以前写的一些学习笔记和技术文章.本文原是很久之前看jq源码时写的片段,隔了很久再看都忘得差不多了.简单整理出来,做个记录. 作为一名前端工程师,jQ ...
jquery 打开服务器文件管理,javascript - 前端js如何封装一个方法或者是jQuery的插件实现点击一个按钮打开本地文件管理系统，进行上传文件...
世界只因有你2017-05-16 13:38:563楼前段时间封装的一个方法,使用ajax和formData方法,实现文件上传,在上传的过程中显示上传进度 js $('#upload').on('c ...
php 自己封装一个调用第三方接口的函数
①在php.ini中开启php_curl扩展(必须开启) ②建议在php.ini中开启php_openssl扩展(本身不是curl必须的,是调用一些第三方接口需要的 ③如果以上操作重启apache后, ...
vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)
这是一个自己封装的组件市面上还有其他组件: vue-qr :这个可以给二维码中间加图片本次封装组件的实例图如下: 下载qrcodde npm i qrcode -S 下载复制的插件 npm i v ...
如何在 SAP UI5 应用中集成第三方库：一个在移动设备上查看 Web 应用打印调试信息的小技巧
这是 Jerry 2021 年的第 43 篇文章,也是汪子熙公众号总共第 320 篇原创文章. 做 Web 开发的程序员,无论使用 SAP UI5,还是 Angular,React,Vue,每天都离不 ...
快速封装一个二维码在线生成接口
方法一:利用接口,生成二维码这种方法生成的二维码最简单,你只需要调用别人提供的二维码生成接口,同时传递相应的参数即可. <?php /*** @author DengPeng <3@de ...

Js自行封装一个 Storge第三方库.

Js自行封装一个 Storge第三方库.相关推荐

最新文章

热门文章