筑坐极_local Storage的详细用法

代码笔记部分

<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>

一、什么是localStorage、sessionStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

二、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中的键值对会被清空

这里我们以localStorage来分析

local Storage的详细用法

苏林*

local Storage

local Storage

2021.06.25

1202人

苏林*

天津市大港区

Hot:16190

苏林*

当前作品暂无评分

还未获得评语哦~