浏览器的本地存储

在哪里看localStorage

• 打开控制台，查看application

  • 

怎么删除localStorage？

setItem存储localStorage时，需要注意什么？

• 需要两个值，它们都是字符串

  • 如果第二个参数不是toString，它一定会帮你调toString的

• 

• 如果key值相同会覆盖掉上面的

  • 
  • 

怎么在localStorage中存储一个对象？

• 用JSON.stringfy将其转化为JSON数据
• 

怎么读取本地存储？

• 使用localStorage.getItem

• 读取一个字符串对象，要将其转化为真正的对象

  • JSON.parse(localStorage.getItem("obj"))

怎么移除本地存储？怎么清空本地存储？

• localStorage.removeItem("keyName")
• localStorage.clear() 清空

如果去读取一个不存在的本地存储时，会怎么样？

• 会显示null
• 

JSON.parse(null)的结果是什么？

• 还是null
• 浏览器关闭掉也还是没有关闭

sessionStorage跟localStorage的区别是什么？

• 前者关闭浏览器就不存在了

vscode中如何全部替换某个词？

• 
• 
• 

localStorage里面的内容，什么时候才没有呢？

• 点击按钮操作api删除

• 用户主动清空缓存

  • 在设置中清除缓存

todoList本地存储

如何往localStorage中存入数据呢？

• watch（要深度监视才行，因为需要监视数据中的done值）

• 用localStorage.setItem(key, value)

  • key跟value都需要是字符串
  • 

为什么下面读取数据不行呢？

data() {
  return {
    toDos: localStorage.getItem("toDos")
  };
  },

• 因为toDos是对象
• 而localStorage中需要是字符串
• 所以需要将其用JSON.stringify转化
• 

怎么读取localStorage？

data() {
    return {
        toDos: JSON.parse(localStorage.getItem("toDos"))
    };
  },

• 这样写有什么bug？

  • 刚打开页面时，toDos没有数据，所以这里的结果是null

  • 而null身上没有length属性

  • footer.vue上需要用到toDos，

    • 
    • 所以这里会报错

• 改进：用JSON.parse(localStorage.getItem("toDos")) || []

改进如下，还有什么bug呢？

• 完成的状态被丢了

  • 

  • 为什么呢？

    • 因为监视时开启的不是深度监视（只监视到了数组）

    • 而我们又是在更改对象里面的属性

    • 开启深度监视

      • 

JSON.parse的作用是什么

• 用来解析JSON字符串的

• 那么什么是JSON字符串呢

  • 
  • 如果要被解析的内容不是""包围着，那么会报错

JSON.stringify的作用是什么

• JSON.stringify()方法将一个 JavaScript 对象或值转换为 JSON 字符串

• 如果对JSON数据进行这个方法，会发生什么

  • 不会有任何变化