本地缓存

/*
  本地缓存
    + 把一些数据记录再浏览器中
    + 多种本地缓存之一

  1. localStorage
  2. sessionStorage

  作用:
    + 浏览器给我们提供的一些本次存储数据的机制
  区别:
    + localStorage 永久缓存, 除非手动删除
    + sessionStorage 会话缓存, 关闭浏览器就没有了
  共同点:
    + 只能存储字符串格式的数据
    + 想存储对象数据结构, 转换成 json 格式存储
  查看:
    + 控制台
    + application
    + localStorage


  语法:
    1. localStorage
      1-1. localStorage.setItem('名字', '值')
        => 存储一条数据
        => 当你重复设置同一个名字的时候, 就是修改
      1-2. localStorage.getItem('名字')
        => 获取一条数据
        => 如果你获取一个没有的名字, 那么是 null
      1-3. localStorage.removeItem('名字')
        => 删除一条数据
      1-4. localStorage.clear()
        => 清除所有数据
    2. sessionStorage
      2-1. sessionStorage.setItem('名字', '值')
        => 增加一条数据
      2-2. sessionStorage.getItem('名字')
        => 获取一条数据
      2-3. sessionStorage.removeItem('名字')
        => 删除一条数据
      2-4. sessionStorage.clear()
        => 清除所有数据

*/

// 1. localStorage
// 1-1. setItem()
// localStorage.setItem('name', 'Jack')
// var obj = { name: 'Jack', age: 18 }
// localStorage.setItem('obj', JSON.stringify(obj))
// localStorage.setItem('name', 'Rose')

// 1-2. getItem()
// 获取 localStorage 里面存储的 name 数据
// var res = localStorage.getItem('name')
// var res2 = localStorage.getItem('obj')
// var res3 = localStorage.getItem('abcd')
// console.log(JSON.parse(res2))

// 1-3. removeItem()
// localStorage.removeItem('name')

// 1-4. clear()
// localStorage.clear()


// 2. sessionStorage
// 2-1. setItem()
sessionStorage.setItem('age', 18)
var obj = { name: 'Jack' }
sessionStorage.setItem('obj', JSON.stringify(obj))

// 2-2. getItem()
// var res = sessionStorage.getItem('age')
// console.log(res)

// 2-3. removeItem()
// sessionStorage.removeItem('obj')

// 2-4. clear()
sessionStorage.clear()