说一说cookie sessionStorage localStorage 区别？

Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。 它们的共同点：都是存储在浏览器本地的 它们的区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M。Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会 加分回答 由于它们的以上区别，所以它们的应用场景也不同，Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

cookie案例

/* 
      cookie  会有一个过期时间，如果不设置过期时间那么关闭页面就会消失，如果想要删除这个cookie的话就要设置一个过期时间，存储大小只有4kb左右
      设置无过期时间： document.cookie = "键=值;"
      设置有过期时间： document.cookie = "键=值;expires=*****"
    */
      //设置cookie
      document.cookie = "age=20;";
      document.cookie ="name=李四;expires=Wed Sep 30 2024 15:13:48 GMT+0800 (中国标准时间)";

      //获取cookie
      console.log(document.cookie); //name=李四; age=20

      //删除cookie  删除cookie原理是重新设置cookie过期时间从而实现删除效果
      document.cookie ="age=20;expires=Wed Sep 30 2022 15:13:48 GMT+0800 (中国标准时间)";

      console.log(document.cookie); //name=李四;

sessionStorage案例

//sessionStorage
      // 添加
      if (!!sessionStorage) {
        //保存string数据
        sessionStorage.setItem("key", "value");
        //保存json数据
        var json = {
          1: "1",
          2: "2",
        };
        sessionStorage.setItem("json", JSON.stringify(json));
      }
      // 获取
      if (!!sessionStorage) {
        //得到string数据
        var value = sessionStorage.getItem("key");
        console.log(value);
        //得到string数据，将其转换成json数据
        var json = sessionStorage.getItem("json");
        json = eval("(" + json + ")");
        console.log(json);
      }
      //   删除
      if (!!sessionStorage) {
        sessionStorage.removeItem("key");
      }
      //   清空所有sessionStorage
      if (!!sessionStorage) {
        sessionStorage.clear();
      }

localStorage案例

// localStorage
      // 设置数据
      localStorage.setItem("name", "张三");
      localStorage.setItem("age", 18);
      localStorage.setItem("address", "上海");
      //   获取数据
      console.log(localStorage.getItem("name"));
      //   获取全部数据
      console.log(localStorage.valueOf());
      //   删除数据
      localStorage.removeItem("name");
      //   清空全部数据
      localStorage.clear();
      //   获取本地存储数据数量
      console.log(localStorage.length);