JS浏览器的本地存储

4、浏览器的本地存储(面试必问)

*localStorage

 * 浏览器的本地存储，持久存储，一旦存储永久存在
 * 注意：只能存基本数据类型(一般存储字符串),不能存储其他数据类型
 * 可以跨页面通讯
 *    两个页面得到了数据共享，我们将这种情况叫做跨页面通讯
 ```js
     // localStorage(增  删(删一条)  清空  查)
     //1.增     window.localStorage.setItem(key, value)
     window.localStorage.setItem('qq1', '88888888')
     window.localStorage.setItem('qq2', '66666666')
     
     //2.查     window.localStorage.getItem(key)
     var qq = window.localStorage.getItem('qq')
     //var pw = window.localStorage.getItem('password') 
     //因为没有对应的key，所以获取到的值为null
     console.log(qq)
     
     //3.删除一条    window.localStorage.removeItem(key)
     window.localStorage.removeItem('qq1')
     
     //4.清空     window.localStorage.clear()
     window.localStorage.clear()
 ```

*sessionStorage

 * 浏览器的本地存储，临时存储，关闭浏览器以后，储存内容自动消失
 * 想要跨页面通讯，必须是本页面跳转的才可以
 ```js
     // sessionStorage
     // 1.增   window.sessionStorage.setItem(key, value)
     window.sessionStorage.setItem('wx1', 'QF001')
     window.sessionStorage.setItem('wx2', 'QF002')
     window.sessionStorage.setItem('wx3', 'QF003')
     
     // 2.查   window.sessionStorage.getItem(key)
     var wx = window.sessionStorage.getItem('wx')
     console.log(wx)
     //var phoneNum = window.sessionStorage.getItem('phoneNum') 
     //因为没有对应的key，所以获取到的值为null
     //console.log(phoneNum) //null
     
     // 3.删除一条  window.sessionStorage.removeItem(key)
     window.sessionStorage.removeItem('wx3')
     
     // 4.清空
     window.sessionStorage.clear()
 ```

*cookie

 * 1.只能存储字符串，并且有固定的格式
 *     + key=value;key2=value2
 ```js
     //1.设置cookie   document.cookie = 'key = value'
      document.cookie = 'QQ = 123456'
 ```
 * 2.存储大小有限制 (大约是4kb)
 * 3.存储有时效性
 *        + 默认是会话级别失效，但是可以手动设置过期时间
 ```js
      // 设置一条带有过期时间的cookie
      // cookie在设置的时候会按照世界标准时间设置
      // 我们的时区是东八区
      var timer = new Date() //当前时间
      document.cookie = 'QQ=123456;expires=' + timer
      
      /**
      * 设置一个3秒后过期的cookie
      *    因为我们所在的东八区，比世界标准时间快了8小时
      *    所以我们想要设置一个3秒后过期的 cookie 必须将时间往前调8小时，然后加上过期时间
      * */ 
      var timer = new Date() //当前当地时间
      timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 3)
      document.cookie = 'QQ=123456;expires=' + timer
      document.cookie = 'WX1=654321'
      document.cookie = 'WX2=qwerty'
      // 获取cookie
      setTimeout(function() {
          console.log(document.cookie)
      }, 3000)
 ```
 * 4.操作必须依赖服务器
 *    + 本地打开的页面不能操作 cookie
 *    + 要求页面必须在服务器打开
 * 5.跟随前后端请求自动携带
 *    + 只要cookie空间中有内容时
 *    + 会在该页面和后端交互的过程中自动携带
 * 6.前后端操作
 *    + 前端可以使用JS 来操作cookie
 *    + 任何一个后端语言都可以操作cookie
 * 7.存储依赖域名
 *    + 哪一个域名存储，哪一个域名使用
 *    + 不能跨域名通讯

5、本地存储的区别

 *    1.出现时间
 *        cookie:有JS的时候就存在了
 *        storage: H5 出现以后才有
 *    2.存储大小
 *        cookie:4k左右
 *        storage:20M左右
 *    3.前后端交互
 *        cookie:会跟随页面的请求自动携带
 *        storage:不会跟随请求自动携带
 *    4.过期时间
 *        cookie:默认是会话级别，可以手动设置过期时间
 *        storage:不能手动设置
 *    5.前后端操作
 *        cookie:前后端语言都能操作
 *        storage:只能由JS操作
 *    localStorage和sessionStorage的区别
 *      1.过期时间
 *          localStorage:永久存储，除非手动删除
 *          sessionStorage:临时存储
 *      2.跨页面通讯
 *          localStorage:直接跨页面通讯
 *          sessionStorage:只能是当前窗口(页面)跳转的页面才能通讯
 *      3.共同点
 *          只能存储字符串，不能存储复杂数据类型