【Vue】sessionStorage存取数据

news/2024/4/13 11:43:13/文章来源:https://blog.csdn.net/weixin_47375144/article/details/136500635

一. 需求

1.1 模板

  1. Vab Admin Pro

1.2 组件

  1. ElementUI

1.3 阐述

列表页面搜索【关键词】点击【查询】后,点击【查看】按钮跳转到【详情页】,详情页【返回】【保留原搜索关键词】

  1. 原图
    在这里插入图片描述

  2. 搜索查询【关键词】
    在这里插入图片描述

  3. 详情
    在这里插入图片描述

  4. 返回后【保留】【搜索查询关键词】
    在这里插入图片描述

二. 实现

  1. 技术:sessionStorage
  2. 代码
    template中代码【简略】,看主要事件即可
<template><div><vab-query-form><vab-query-form-left-panel :span="12"><el-form :inline="true" :model="query" @submit.native.prevent><el-form-item label="标题"><el-input v-model.trim="query.keyword" clearable placeholder="请输入标题"/></el-form-item><el-form-item><el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button><el-button icon="el-icon-delete" @click="clearData">清空</el-button></el-form-item></el-form></vab-query-form-left-panel></vab-query-form><el-table v-loading="listLoading" border :data="list" :height="$baseTableHeight(1)" ><el-table-column type="selection" width="55" /><el-table-column label="#" type="index" width="55" /><el-table-column label="标题" prop="title" />// 剩下略</el-table></div>
</template>
<script>export default{data(){return{listLoading: true,list:[],query: {keyword: '',},pageForm: {total: 0,pageNo: 1,pageSize: 10,},}},created() {//获取缓存中的keywordthis.query.keyword = sessionStorage.getItem('searchKeyword')this.fetchData()},methods:{/*** 获取列表数据**/fetchData(){this.listLoading = truefor (const key in this.query) {if (!this.query[key]) delete this.query[key]}const {data: { records, total },} = await getDocumentList(this.pageForm.pageNo,this.pageForm.pageSize,Object.assign({}, this.query))this.list = recordsthis.pageForm.total = totalthis.listLoading = false},/*** 查询**/queryData() {this.pageForm.pageNo = 1//将搜索条件存到浏览器sessionStorage.setItem('searchKeyword', this.query.keyword)this.fetchData()},/*** 清空搜索项**/clearData() {this.query = {}//删除缓存中的keywordsessionStorage.setItem('searchKeyword', '')this.fetchData()},}}
</script>

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

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

相关文章

vue3 setup函数与setup语法糖之间的区别

普通setup函数构建的组件 import {ref} from vueexport default {setup(){const countref(0)const handleUpdate()>{count.value}return{count,handleUpdate}}} </script>使用setup语法糖构建的组件 <script setup>import {ref} from vueconst countref(0)con…

人工智能在信息系统安全中的运用

一、 概述 对于企业和消费者来讲&#xff0c;人工智能是非常有用的工具&#xff0c;那又该如何使用人工智能技术来保护敏感信息?通过快速处理数据并预测分析&#xff0c;AI可以完成从自动化系统到保护信息的所有工作。尽管有些黑客利用技术手段来达到自己的目的&#xff0c;但…

Echarts 配置项 series 中的 data 是多维度

文章目录 需求分析 需求 如下图数据格式所示&#xff0c;现要求按照该格式进行绘制折线图 分析 在绘制折线图时&#xff0c;通常我们的 series 中的 data 数据是这样的格式 option {title: {text: Stacked Area Chart},tooltip: {trigger: axis,axisPointer: {type: cross…

阿里云配置服务器详细指南_2024新版CPU内存带宽系统盘选择

阿里云服务器配置怎么选择&#xff1f;CPU内存、公网带宽和系统盘怎么选择&#xff1f;个人开发者或中小企业选择轻量应用服务器、ECS经济型e实例&#xff0c;企业用户选择ECS通用算力型u1云服务器、ECS计算型c7、通用型g7云服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com整…

微前端之实现微前端的几种模式

微前端是什么 实现微前端的几种模式 基于路由分发&#xff1a;Web Components 或 Custom Elements&#xff1a;iframe集成&#xff1a;动态加载/懒加载微前端&#xff1a;容器化方案&#xff1a;single-spa 与 无界的区别 使用无界 准备工作 安装nvm安装pnpm 微前端是什么 微…

网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2022)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和IPSec,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短信认证、LDAP令牌、USB KEY等多达13种认证方式。 0x02 漏洞概述 …

挑战杯 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

Redis实战—商户查询缓存

本博客为个人学习笔记&#xff0c;学习网站&#xff1a;黑马程序员Redis入门到实战 实战篇之商户查询缓存 目录 什么是缓存 添加Redis缓存 缓存更新策略 数据库缓存不一致解决方案 案例&#xff1a;给查询商铺的缓存添加超时剔除和主动更新策略 缓存穿透 案例&#xff1…

Linux之cd、pwd、mkdir 命令

cd命令&#xff0c;切换目录 1&#xff09;当Linux终端&#xff08;命令行&#xff09;打开的时候&#xff0c;会默认以用户的HOME目录作为当前的工作目录。 2&#xff09;我们可以通过cd命令&#xff0c;更改当前所在的工作目录。 3&#xff09;cd命令来自英文&#xff1a;C…

Python 开发图形界面程序

用 Python 语言开发图形界面的程序&#xff0c;有2种选择&#xff1a; Tkinter 基于Tk的Python库&#xff0c;这是Python官方采用的标准库&#xff0c;优点是作为Python标准库、稳定、发布程序较小&#xff0c;缺点是控件相对较少。 PySide2/PySide6 基于Qt 的Python库&#x…

2024.03.02蓝桥云课笔记

1.scanf与printf取消分隔符的限制方法 示例代码&#xff1a; int main() { char s[10];scanf("%d[^\n]",s);printf("%s",s);return 0; } 运行&#xff1a; 输入&#xff1a;Hello World 输出&#xff1a;Hello World 注&#xff1a;其中[]中是一个正则…

飞书云文档API操作详细介绍

1.场景分析 公司内部很多文档都是由多人进行维护的&#xff0c;随时发生变更&#xff0c;因此在利用这些数据的时候就需要直接读取云文档的数据&#xff0c;从而执行下一步动作。团队云文档api执行权限一般需要管理员审核才能使用。如果你就是管理员&#xff0c;那么恭喜你&am…

Python(NetOps)前传-网络设备开局配置

背景 我们知道用Python在cli配置网络设备的前提是&#xff1a; 网络设备与Python主机网络可达网络设备已开启并完成ssh相关配置 目标 本文已华为S5720S-52P-LI-AC交换机为例&#xff0c;完成&#xff1a; 完成网络设备开局配置&#xff1b;用Python脚本验证ssh登录 配置 …

html css 导航栏 2

鼠标划过会向上移动改变颜色 html文件 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>导航栏</title><link rel"stylesheet" href"css/dhl1.css" /></head><body><div …

Marin说PCB之POC电路layout设计仿真案例---01

最近娃哈哈饮料突然爆火&#xff0c;看新闻后才知道春晚的的时候宗老已经病的很严重了&#xff0c;现在也已经离我们而去了&#xff0c;宗老是一个值得我们尊敬爱戴的伟大企业家。于是乎小编我立马去他们的直播间买了一箱娃哈哈AD钙奶支持一下我们的国货。 中午午休的时候&…

LeetCode_25_困难_K个一组翻转链表

文章目录 1. 题目2. 思路及代码实现&#xff08;Python&#xff09;2.1 模拟 1. 题目 给你链表的头节点 h e a d head head &#xff0c;每 k k k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k k k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节…

【HarmonyOS】鸿蒙开发之Stage模型-UIAbility的启动模式——第4.4章

UIAbility的启动模式简介 一共有四种:singleton,standard,specified,multion。在项目目录的:src/main/module.json5。默认开启模式为singleton(单例模式)。如下图 singleton&#xff08;单实例模式&#xff09;启动模式 每个UIAbility只存在唯一实例。任务列表中只会存在一…

网络编程(3/4)

广播 ​ #include<myhead.h>int main(int argc, const char *argv[]) {//1、创建套接字int sfd socket(AF_INET, SOCK_DGRAM, 0);if(sfd -1){perror("socket error");return -1;}//2、将套接字设置成允许广播int broadcast 1;if(setsockopt(sfd, SOL_SOC…

重装显卡驱动记录

重装显卡驱动记录 任务记录现状描述执行情况 任务 晚上回来&#xff0c;开电脑&#xff0c;发现总是进不去系统&#xff08;这个情况我经常见&#xff09;&#xff0c;但偶尔进系统&#xff0c;识别不了我的外接屏&#xff08;这个第一次见&#xff09;。来来回回重启了1h多了…

Igraph入门指南 2

3、图的基本要素——边(Edge|Arc) 图的最本质的内容是一种二元关系&#xff0c;如果给这种二元关系赋予一个方向&#xff0c;就产生了有向图和无向图的分类&#xff0c;在教材中&#xff0c;无向的边叫Edge&#xff0c;有向的边叫Arc&#xff0c;另外&#xff0c;根据两个顶点…