localStorage的使用

主要了解下localStorage的使用，localStorage的优势和与cookie的区别。

localStorage的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">
    /*1
    let i ={   用户信息        name:"ss",
        job:"teacher"
    };
    console.log(i);
    i= JSON.stringify(i); //转化字符串    console.log(i);//这样对应的key和值就投进去了
     手动的让某些数据缓存,长期缓存   只能投字符串类型      localStorage.setItem("LOGIN_USER_INFO",i);
      */
    /*2 把缓存的值取出来     let x = localStorage.getItem("LOGIN_USER_INFO");
      console.log(x);
      x = JSON.parse(x);//字符串转对象      console.log(x.name);//只有是对象格式才能.某个值       */
    /* 3  移除    localStorage.setItem("aa","10001");
    localStorage.setItem("bb","10002");
    localStorage.setItem("cc","10003");
    localStorage.removeItem("aa");
        localStorage.clear("");
     */
    /* 4
    localStorage.setItem("aa","10001");
    localStorage.setItem("bb","10002");
    localStorage.setItem("cc","10003");
    let x = localStorage.key(0);//获取你想要的key
     console.log(x);
     let l = localStorage.length();//个数      console.log(l);
              */
    /* 5
                  //参数hasOwnProperty有没有某个key
      let has = localStorage.hasOwnProperty("aa");
      console.log(has);
       */
    /*6 投入值      sessionStorage.setItem("AAA","666");
           */
</script>

什么是cookie

cookie称之为会话跟踪技术，顾名思义，就是在一次会话中跟踪记录一些状态。首先，所谓的”会话“指的就是从浏览器打开一个网站到访问它的其他网页直到浏览器关闭的这个过程。
cookie就可以在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）。
cookie是服务器存储在客户端本地的一个文件. 它就好比服务器发给客户端的一个身份标识, 有了这个身份牌, 只要客户端随身携带这个身份牌. 服务器就能识别我们的身份了。

cookie的特点

  • 只能存储文本
  • 单条存储有大小限制4KB左右
  • 数量限制（一般浏览器，限制大概在50条左右）
  • 读取有域名限制：不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取。简单的讲就是，哪个服务器发给你的cookie，只有哪个服务器有权利读取（身份牌是我的，当然只有我能读取，你媳妇儿的手机自动连接了邻居老王家的wifi，你知道这意味着什么吗？）
  • 时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间
  • 路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。一般cookie都存在项目的根目录，这样就可以避免这种问题。

localStorage的优势与劣势

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。