【前端所学分享1】：搜索历史记录功能的实现

检查是否有过这个记录，如果有过将其删除后重新添加在列表最前面。

index.vue

import { getHistory, setHistory } from '@/utils/storage'
data () {
    return {
      search: '', // 在输入框中输入搜索的内容
      history: getHistory()  // 这边调用获取本地历史记录的一个函数
    }
  },
methods: {
    // 搜索加入历史记录 key即为输入内容的形式参数
    addhistory (key) {
        // 【A】如果没有输入搜索内容 直接return
        if (!this.search) {
            return
        }
        // 【B】获取本地存储的历史
        const index = this.history.indexOf(key)
        if (index !== -1) {
          this.history.splice(index, 1)
        }
        // 【C】添加到history数组中
        this.history.unshift(key)
        // 【D】本地持久化，就是存储在本地
        setHistory(this.history)
        // 【E】路由跳转
        this.$router.push(`/searchlist?search=${key}`)
   },
   // 清空历史记录
   clear () {
     setHistory([])
     this.history = []
     this.$toast.success('清空历史成功')
   }

@/utils/storage.js

const HISTORY_KEY = 'LPJ_history'
// 获取本地历史记录
export const getHistory = () => {
  const result = localStorage.getItem(HISTORY_KEY)
  return result ? JSON.parse(result) : []
}
// 设置本地历史记录
export const setHistory = (history) => {
  localStorage.setItem(HISTORY_KEY, JSON.stringify(history))
}

【A】.在JavaScript中，有几种值会被认为是布尔值 false（即所谓的“假值”或“falsy values”）。这些值包括：

1. false - 布尔值 false 本身。
2. 0 - 数字零。
3. -0 - 负零（虽然在数值上等于零，但在某些情况下有特殊的表示意义，但在布尔上下文中仍然被视为 false）。
4. 0n - BigInt零（BigInt类型中的零）。
5. "" - 空字符串。
6. null - 空值。
7. undefined - 未定义值。
8. NaN - 非数字值（Not-a-Number）。

【B】在JavaScript中，indexOf 方法用于确定一个值在字符串或数组中的首次出现的位置（索引）该方法对于字符串和数组都适用。splice() 方法是一个非常实用的数组操作函数，它允许你在不改变原数组顺序的前提下，对数组进行添加、删除或替换元素的操作。这个方法会直接修改原数组，并返回一个新的数组，该数组包含了被删除的元素（如果没有删除操作，则返回一个空数组）。

indexOf 方法：

对于字符串

对于字符串，indexOf 方法返回一个指定的字符串值在另一个字符串中首次出现的位置（索引）。如果没有找到，则返回 -1。

语法：

string.indexOf(searchValue, fromIndex)

• searchValue：要在字符串中查找的子字符串。
• fromIndex（可选）：表示从字符串的哪个索引位置开始查找，默认为 0。

  对于数组

  对于数组，indexOf 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1。该方法使用严格相等（===）进行比较。

  语法：

  array.indexOf(searchElement, fromIndex)

  • searchElement：要在数组中查找的元素。
  • fromIndex（可选）：表示从数组的哪个索引位置开始查找，默认为 0。如果该索引大于或等于数组的长度，则整个数组都会被搜索。如果参数为负值，则将其视为数组末尾之前的偏移量（即 array.length + fromIndex）。如果计算出的索引值仍然小于 0，则整个数组都会被搜索。

    splice()方法：

    1.删除元素：

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    let removed = myFish.splice(2, 1); // 从索引2开始，删除1个元素
    console.log(myFish); // 输出: ['angel', 'clown', 'sturgeon']
    console.log(removed); // 输出: ['mandarin']

    2.添加元素：

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    let added = myFish.splice(2, 0, 'drum', 'trumpet'); // 从索引2开始，不删除元素，插入两个新元素
    console.log(myFish); // 输出: ['angel', 'clown', 'drum', 'trumpet', 'mandarin', 'sturgeon']
    console.log(added); // 输出: []（因为没有删除任何元素）

    3.替换元素：

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    let replaced = myFish.splice(2, 2, 'drum'); // 从索引2开始，删除2个元素，并插入1个新元素
    console.log(myFish); // 输出: ['angel', 'clown', 'drum', 'sturgeon']
    console.log(replaced); // 输出: ['mandarin']（只删除了一个元素，因为只指定了一个新元素进行替换）

    【C】在JavaScript中，unshift 方法是数组的一个内置方法，用于在数组的开头添加一个或多个元素，并返回新的数组长度。该方法会直接修改原数组，并返回数组的新长度（即添加元素后的数组长度）。

    示例语法：

    
    （图片来源网络，侵删）

    // 在数组开头添加一个元素
    let newLength1 = arr.unshift(2);
    console.log(arr);        // 输出: [2, 3, 4, 5]
    console.log(newLength1); // 输出: 4
     
    // 在数组开头添加多个元素
    let newLength2 = arr.unshift(1, 0);
    console.log(arr);        // 输出: [0, 1, 2, 3, 4, 5]
    console.log(newLength2); // 输出: 6

    【D】在JavaScript中，localStorage 提供了一种在用户的浏览器中存储数据的方式，这些数据在页面重新加载后仍然存在。localStorage 可以存储任何可以被序列化为字符串的数据。

    • localStorage 只能存储字符串。如果要存储对象或数组，需要先使用 JSON.stringify() 方法将它们转换为字符串，然后再存储。同样地，在检索数据时，需要使用 JSON.parse() 方法将字符串转换回对象或数组。
    • setItem(key, value)用于将数据存储到 localStorage 中。
    • getItem(key)用于从 localStorage 中检索数据。
    • removeItem(key)用于从 localStorage 中删除指定的数据。

      【E】在 Vue.js 应用程序中，this.$router.push 是 Vue Router 提供的一个方法，用于在客户端进行路由跳转。当你调用这个方法时，你可以指定一个目标路由的路径，并且可以选择性地传递一些查询参数（query parameters）或路由参数（route parameters）。

      Vue Router 会尝试导航到 /searchlist 路由，并在 URL 的查询字符串中附加一个 search 参数，其值为 key 变量的当前值。

      在目标路由（即 /searchlist）对应的组件中，你可以通过 this.$route.query.search 来访问这个查询参数的值。

      
      （图片来源网络，侵删）

                                                                                                                             

                                                                                                                         仅作为个人学习笔记记录

      
      （图片来源网络，侵删）