前端通过一个页面搜索框进行关键字查询本地储存的数据(accountsInfoRst:{}),展示在页面
时间: 2024-03-20 20:39:11 浏览: 15
如果你的数据是通过 localStorage 存储在本地的,那么你可以通过以下步骤实现前端通过页面搜索框进行关键字查询本地储存的数据,并将查询结果展示在页面上。
1. 在 Vue 组件中添加 data 属性,用于存储搜索框中的关键字以及查询结果。
```javascript
data() {
return {
keyword: '',
searchResult: []
}
}
```
2. 在模板中添加搜索框和查询结果展示的代码。
```html
<template>
<div>
<input type="text" v-model="keyword" @keyup.enter="search" />
<ul>
<li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
</ul>
</div>
</template>
```
3. 编写 search 方法,在该方法中遍历本地存储的数据,查找包含关键字的数据,并将查询结果存储到 searchResult 中。
```javascript
methods: {
search() {
const localStorageData = JSON.parse(localStorage.getItem('accountsInfoRst'))
this.searchResult = []
for (let key in localStorageData) {
if (localStorageData[key].indexOf(this.keyword) !== -1) {
this.searchResult.push(localStorageData[key])
}
}
}
}
```
其中,`localStorage.getItem('accountsInfoRst')` 可以获取本地存储的数据,`JSON.parse` 将字符串转为对象,`indexOf` 方法判断关键字是否在字符串中出现。
4. 最后,记得在 Vue 组件中引入 localStorage。
```javascript
localStorage.getItem('accountsInfoRst')
```
这样就实现了一个基本的前端通过页面搜索框进行关键字查询本地储存的数据,并将查询结果展示在页面上。