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()

没了，到底了