uniapp缓存对象数组

需求:使用uniapp,模拟key(表名)增删改查对象数组,每个key可以单独操作,并模拟面对对象对应表,每个key对应的baseInstance 类似一个操作类,当然如果你场景比较简单,可以改为固定key或者传值key,调普通js而不需要new

base.js

export default {data() {return {}},methods: {// 一是不需要new来调用,二是参数非常灵活,可以不传,也可以这么传createBaseStore(key) {return new this.baseInstance(key || {})},// 函数创建对象 每个key对应自己的方法 达到实例化效果 使用 baseInstance.addExt(obj) 自动携带固定keybaseInstance(key) {this.dataKey = key;this.addExt = function addExt(obj) {var dataList = this.getAllExt()if (dataList == null) {dataList = new Array()}var newItemid = 0const last = dataList.length - 1if (last >= 0) {newItemid = dataList[last].id + 1}obj.id = newItemiddataList.push(obj)this.save(dataList)}this.removeExt = function removeExt(param) {var dataList = this.getAllExt();var findItemIndex = dataList.findIndex(item => {if (item.id == param) {return true}})if (findItemIndex >= 0) {const newList = dataList.splice(findItemIndex, 1)console.log("remove item is index", findItemIndex, JSON.stringify(newList))this.save(dataList)} else {console.log("not find remove param", param)}}this.changeExt = function changeExt() {console.log("change")}this.searchExt = function searchExt() {console.log("search")}this.save = function save(dataList) {var dataJson = JSON.stringify(dataList)uni.setStorage({key: key,data: dataJson,success: function() {console.log("key:", key, 'addExt success', dataJson);console.log('curr size', dataList.length);}});}this.getAllExt = function getAllExt() {try {const value = uni.getStorageSync(this.dataKey);if (!value) {console.log('getAllExt is empty');return null}const dataBean = JSON.parse(value)if (dataBean) {return dataBean}} catch (e) {console.log("showAllToLogExt error", e);}return null}this.showAllToLogExt = function showAllToLogExt() {try {const value = this.getAllExt();if (value) {console.log("showAllToLogExt", value);}} catch (e) {console.log("showAllToLogExt error", e);}}},clearAllExt() {console.log("clearAllExt")uni.clearStorage()}}}

vue使用

<template><view><view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;"><button type="default" v-on:click="showAllToLog()">showAllToLog</button><button type="default" v-on:click="add()">add</button><button type="default" v-on:click="remove()">remove</button><button type="default" v-on:click="change()">change</button><button type="default" v-on:click="search()">search</button><button type="default" v-on:click="clearAll()">clearAll</button></view></view>
</template><script>import base from "@/pages/base/base.js"export default {mixins: [base],data() {return {title: 'demo学习',TestBean: {id: 0,a: "",b: "",c: "",},dataExt: {},dataExt2: {},storeInstance1: this.createBaseStore("key111"),storeInstance2: this.createBaseStore("key222"),indexId: 0}},onload() {getAllExt()},methods: {showAllToLog() {this.storeInstance1.showAllToLogExt()this.storeInstance2.showAllToLogExt()},add() {// 操作类型1实例 ,存对象2到对象数组2var currentTime = new Date();this.dataExt.name = "111"this.dataExt.goodsTime = currentTimethis.storeInstance1.addExt(this.dataExt)// key1Store.remove// key1Store. 等等操作// 操作类型2实例 ,存对象2到对象数组2this.dataExt2.name = "param2"this.dataExt2.param2Time = currentTimethis.storeInstance2.addExt(this.dataExt2)},remove() {// 模拟后续加上id即可目前只是掩饰this.storeInstance1.removeExt(4)this.storeInstance2.removeExt(4)},change() {this.changeExt()},search() {this.searchExt()},clearAll() {this.clearAllExt()},}}
</script><style></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AC修炼计划(AtCoder Regular Contest 167)

传送门&#xff1a;AtCoder Regular Contest 167 - AtCoder 再次感谢樱雪喵大佬的题解&#xff0c;讲的很详细&#xff0c;Orz。 大佬的博客链接如下&#xff1a;Atcoder Regular Contest 167 - 樱雪喵 - 博客园 (cnblogs.com) 第一题很签到&#xff0c;就省略掉了。 第二题…

数据结构——二叉树的公共祖先问题

数据结构——二叉树的公共祖先问题 236. 二叉树的最近公共祖先思路 235. 二叉搜索树的最近公共祖先思路1.递归2.迭代 236. 二叉树的最近公共祖先 236. 二叉树的最近公共祖先 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#x…

(矩阵) 289. 生命游戏 ——【Leetcode每日一题】

❓ 289. 生命游戏 难度&#xff1a;中等 根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板&#xff0c;每一个格子都可以看成是一个细胞。每个细胞都具有一…

16-spring AOP核心对象的创建

文章目录 1. aop的几个重要概念2. aop bean definition3. AspectJPointcutAdvisor4.AopConfigUtils5.AnnotationAwareAspectJAutoProxyCreator6. 循环依赖 1. aop的几个重要概念 参考官方解释&#xff1a;https://docs.spring.io/spring-framework/docs/5.2.9.RELEASE/spring-…

大数据之LibrA数据库系统概览

实时监控 “实时监控”页面如图1所示&#xff0c;用户可单击刷新按钮手动刷新当前页面&#xff0c;也可在点刷新按钮前选择自动刷新时长&#xff0c;刷新时长包括&#xff1a;每30秒刷新一次、每60秒刷新一次、停止刷新。 实时监控数据&#xff08;监控时间轴产生的新曲线&am…

Oracle数据中如何在 where in() 条件传参

一、问题场景描述 在sql 条件中&#xff0c;如何在 where in()中想传入参数&#xff0c;如果直接 where in(:seqList)&#xff0c;当传入单个值&#xff0c;seqList: ‘80’ 是没问题的&#xff0c;但是初入多个值时&#xff0c;seqList: ‘80,90’ &#xff0c;因缺少单引号&…

2 用TensorFlow构建一个简单的神经网络

上一篇&#xff1a;1 如何入门TensorFlow-CSDN博客 环境搭建 后续介绍的相关代码都是在pycharm运行&#xff0c;pycharm安装略。 打开pycharm&#xff0c;创建一个新的项目用于tensorflow编码练习&#xff0c;在Terminal输入命令&#xff1a; # 依赖最新版本的pip pip inst…

Pytest自动化测试框架之Allure报告详解

简介 Allure Framework是一种灵活的、轻量级、多语言测试报告工具。 不仅可以以简洁的网络报告形式非常简洁地显示已测试的内容&#xff0c; 而且还允许参与开发过程的每个人从日常执行中提取最大程度的有用信息和测试。 从开发/测试的角度来看&#xff1a; Allure报告可以…

线性代数的本质笔记

课程来自b站发现的《线性代数的本质》&#xff0c;可以帮助从直觉层面理解线性代数的一些基础概念&#xff0c;以及把一些看似不同的数学概念解释之后&#xff0c;发现其实有内在的关联。 这里只对部分内容做一个记录&#xff0c;完整内容请自行观看视频~ 01-向量究竟是什么 …

LeetCode 2316. 统计无向图中无法互相到达点对数::广度优先搜索(BFS)

【LetMeFly】2316.统计无向图中无法互相到达点对数&#xff1a;广度优先搜索&#xff08;BFS&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/count-unreachable-pairs-of-nodes-in-an-undirected-graph/ 给你一个整数 n &#xff0c;表示一张 无向图 中…

2023年中国酒类新零售行业发展概况分析:线上线下渠道趋向深度融合[图]

近年来&#xff0c;我国新零售业态不断发展&#xff0c;线上便捷性和个性化推荐的优势逐步在放大&#xff0c;线下渠道智慧化水平持续提升&#xff0c;线上线下渠道趋向深度融合。2022年&#xff0c;我国酒类新零售市场规模约为1516亿元&#xff0c;预计2025年酒类新零售市场规…

Mysql——查询sql语句练习

一、单表查询 素材&#xff1a; 表名&#xff1a;worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作 等 1、显示所有职工的基本信息。 select * from worker; 2、查询所有职工所属部门的部门号&#xff0c;不显示重复的部门号。 select distinct 部门号…

k8s基础 随笔

写个笔记&#xff0c;后面再完善 部署第一个应用 为什么先实战水平扩缩&#xff1f;因为这个最简单&#xff0c;首先来部署一个喜闻乐见的nginx kubectl create deployment web --imagenginx:1.14 --dry-run -o yaml > web.yaml --dry-run表示试运行&#xff0c;试一下看…

使用Chrome浏览器进行网页截图

在需要截图的网页上&#xff0c;按F12打开开发调试页面&#xff0c;再按下ShiftCtrlP&#xff0c;打开命令输入框&#xff0c;输入Capture&#xff0c; 此时会弹出4中截图模式&#xff0c;我个人比较喜欢用Capture full size screenshot Capture area screenshot&#xff0c;…

2023年中国纸箱机械优点、市场规模及发展前景分析[图]

纸箱机械行业是指涉及纸箱生产和加工的机械设备制造、销售和相关服务的产业。这个行业的主要任务是设计、制造和提供用于生产各种类型和规格纸箱的机械设备&#xff0c;以满足包装行业对纸箱的不同需求。 纸箱机械行业优点 资料来源&#xff1a;共研产业咨询&#xff08;共研网…

将语义分割的标注mask转为目标检测的bbox

1. 语义分割标签 1.1 labelme工具 语义分割的标签是利用labelme工具进行标注的,标注的样式如下: 1.2 语义分割的标签样式 2. 转换语义分割的标注到目标检测的bbox 实现步骤 (1) 利用标注的json文件生成mask图片(2) 在mask图片中找到目标的bbox矩形框的左上角点和右下角点(…

d3dx9_43.dll丢失怎么解决,四个解决方法帮你解决d3dx9_43.dll丢失

随着科技的不断发展&#xff0c;我们越来越依赖各种软件和硬件设备来提高生活和工作效率。然而&#xff0c;有时候我们可能会遇到一些技术问题&#xff0c;如“d3dx9_43.dll丢失”的问题。这个问题可能导致某些程序无法正常运行&#xff0c;给我们的生活带来诸多不便。因此&…

java中的容器(集合),HashMap底层原理,ArrayList、LinkedList、Vector区别,hashMap加载因子0.75原因

一、java中的容器 集合主要分为Collection和Map两大接口&#xff1b;Collection集合的子接口有List、Set&#xff1b;List集合的实现类有ArrayList底层是数组、LinkedList底层是双向非循环列表、Vector&#xff1b;Set集合的实现类有HashSet、TreeSet&#xff1b;Map集合的实现…

优化销售策略,突破企业全面预算管理难题

传统的企业年度销售计划往往会消耗企业内部人员很多精力和时间&#xff0c;比如需要收集数据、处理电子表格、确定项目优先级、预测未来发展以及为次年的费用制定预算等。然而随着这些繁琐的工作不断进行&#xff0c;其中的准确性和价值也受到了一定的怀疑。虽然销售计划仍按着…

【API篇】五、Flink分流合流API

文章目录 1、filter算子实现分流2、分流&#xff1a;使用侧输出流3、合流&#xff1a;union4、合流&#xff1a;connect5、connect案例 分流&#xff0c;很形象的一个词&#xff0c;就像一条大河&#xff0c;遇到岸边有分叉的&#xff0c;而形成了主流和测流。对于数据流也一样…