vue 历史搜索记录读取新增删除

1 案例说明

​ 实现搜索历史展示、搜索内容跳转、搜索历史清空,限制搜索历史展示数目,历史记录存储于本地 localStorage

2 案例演示
search.gif
2 源码

​ 本项目 github 源码:https://github.com/trp1119/vue-small-case






3 使用API
3.1 localStorage API
3.1.1 setItem 保存数据
localStorage.setItem("key", "value");
3.1.2 getItem 读取数据
let localHistory = localStorage.getItem("key");
3.1.3 removeItem 删除数据:
localStorage.removeItem("key");
3.2 String API
3.2.1 String.prototype.split()

split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组。

let str = "衣服|鞋子|裤子"
let arr = str.split("|")
console.log(arr) // ["衣服","鞋子","裤子"]
3.3 Array API
3.3.1 Array.prototype.filter()

filter() 方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

filter 不会改变原数组,它返回通过 filter()callback 过滤后的新数组。如果没有任何数组元素通过测试,则返回空数组。

// 参数 index 为当前处理项,index 为当前处理项的索引, arr 为当前处理数组
let str = "裤子"
let array = ["衣服","鞋子","裤子"]
let newArr = array.filter((item, index, arr) => {
    item !== str // 返回数组中 >3 的值组成的新数组
})
console.log(newArr) // ["衣服","鞋子"]
3.3.2 Array.prototype.join()

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

返回值为一个所有数组元素连接的字符串。如果 arr.length0,则返回空字符串。

如果一个元素为 undefinednull,它会被转换为空字符串。

let array = ["衣服","鞋子","裤子"]
let str = array.join('|') // 使用 | 分隔数组中的每个元素,若缺省则用“,”分隔,若是空字符串''则没有分隔符
console.log(str) // "衣服|鞋子|裤子"
3.3.3 Array.prototype.pop()

pop()方法从数组中删除最后一个元素,并返回所删除元素的值,并改变原数组。当数组为空时返回 undefined

let array = ["衣服","鞋子","裤子"]
let str = array.pop()
console.log(str) // 裤子
console.log(array) // ["衣服","鞋子"]

你可能感兴趣的:(vue 历史搜索记录读取新增删除)