这几天学完jQuery尝试做了一个导航网站的小项目 github地址

为了实现页面刷新或重启后用户的新增网站不被删除,使用了哈希表将用户的数据存储在了浏览器本地

具体的过程

  • 首先是一段读取缓存的代码
1
2
3
const x = localStorage.getItem('x'); //读取缓存
const xObject = JSON.parse(x)
const hashMap = xObject || [];

具体步骤 :

  1. 首先声明一个变量x,它代表了缓存。

  2. 然后我们利用JSON.parse()将从浏览器中读取到的缓存转换为数组

  3. 声明一个哈希表,它的值就是这个数组,但是初次打开该网站时缓存为空,所以我们需要使用逻辑运算符||来让它有一个初始的空值

  4. 好了,现在哈希表就有了

  • 往哈希表里增删数据
1
2
3
4
5
    hashMap.push({
        logo: simplifyUrl($url)[0].toUpperCase(),
        url: $url

    hashMap.splice(index, 1)

具体步骤:

  1. 我们只需要像数组一样将数据push或者slice

  2. 这样我们就有了存储数据的哈希表

  • 接下来要保存数据
1
2
3
4
window.onbeforeunload = () => {
    const string = JSON.stringify(hashMap);
    localStorage.setItem('x', string) //自动保存
}

window.onbeforeunload是指在浏览器关闭前

具体步骤:

  1. 将哈希表转换为字符串

  2. 将字符串string的数据保存到浏览器本地缓存

  3. 现在浏览器就保存这个数据了,我们可以使用清除浏览器缓存来清除它