JS本地存储,搜索历史记录功能,重新排序

前言:

  • 搜索历史功能在项目中很常见,特别是在一些商城项目,为了方便后续开发,写篇文章记录一下!

效果:

  • 效果比较简陋,懂就好(手动滑稽)
    效果展示

正文

  • 先说好,没有HTML,没有CSS,只有Javascript

1、先获取一下需要操作的元素

let inputs = document.querySelector('input')
let btn = document.querySelector('button')

2、执行点击事件

 btn.addEventListener('click', () => {
      // 执行存储函数
      setHistory(inputs.value)
      // 清空输入框内容
      inputs.value = ''
 })

3、存储函数(正文)

ps:代码可以优化,自己搞

function setHistory(val) {
      if (val.length !== 0) {
        let historyArray = localStorage.getItem('history')
        if (!historyArray) {
          historyArray = []
        } else {
          historyArray = JSON.parse(historyArray)
        }
        // 去除重复数据,输入相同数据时,重新排序
        historyArray = historyArray.filter((value) => {
          return value !== val
        })
        historyArray.unshift(val)
        localStorage.setItem('history', JSON.stringify(historyArray))
      }
}

4、获取本地存储数据

let getHistory = JSON.parse(localStorage.getItem('history'))

获取本都存储数据
5、删除本地存储数据

两种删除方法都可以(这是清除全部,要单个删除自己搞)

 localStorage.removeItem('history')
 
 localStorage.clear()

没了,到底了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值