js 的 localStorage sessionStorage 区别

• localStorage, sessionStorage 都可以用于在客户端浏览器存储数据, 与 cookie 不同的是, 发起 http 请求并不会自动携带 localStorage, sessionStorage
• localStorage, sessionStorage 只是生命周期不同, 它们的 api 是相同的, 例如 setItem getItem clear removeItem key length
• localStorage, sessionStorage 存入的 key 和 value 都固定是字符串, 如果存入我们存入对象, 那么会转为固定的字符串 [object Object], 这不是我们期望的, 可以调用 JSON.stringify 转为 json 字符串再存入
• localStorage 生命周期是永久, 只要用户不清理浏览器缓存即可. 而 sessionStorage 生命周期仅限于浏览器关闭前, 即浏览器一旦关闭, 那么 sessionStorage 数据就会丢失
• localStorage, sessionStorage 的作用域都是相同的, procotol://ip或者domain:port 注意: http://www.baidu.com 与 https://www.baidu.com 的 storage 不能共享, 因为协议不同, http://a.baidu.com 与 http://b.baidu.com 也不能共享, 因为域名不同

 // 存入某个 key value
  let username = 'username';
  localStorage.setItem(username, '你好鸭')

  // 获取某个 key 的 value
  console.log(`localStorage.getItem('username') = ${localStorage.getItem(username)}`)


  // 遍历所有 key value
  for (let i = 0; i < localStorage.length; i++){
    console.log(`key = ${localStorage.key(i)}, value = ${localStorage.getItem(localStorage.key(i))}`);
  }

  // 移除某个 key 的 value
  localStorage.removeItem(username)
  // value 不存在, 返回 null
  console.log(`localStorage.getItem('username') = ${localStorage.getItem(username)}`)

  // 移除所有 key value
  localStorage.clear();