• localStorage


    localStoragelocalStorage可以将第一次请求的数据直接存储到本地,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小(不同的浏览器有所不同)。

    localStorage的局限

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

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

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

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

    5、localStorage不能被爬虫抓取到

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

    localStorage生命周期是永久
    sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了

    1. //判断浏览器是否支持
    2. if(!window.localStorage){
    3. alert("浏览器不支持localstorage");
    4. return false;
    5. }else{
    6. //主逻辑业务
    7. var storage=window.localStorage;
    8. //写入a字段
    9. storage["a"]=1;
    10. //写入b字段
    11. storage.b=2;
    12. //写入c字段
    13. storage.setItem("c",3);
    14. console.log(typeof storage["a"]);
    15. console.log(typeof storage["b"]);
    16. console.log(typeof storage["c"]);//打印出来的都是string类型
    17. }

    官方推荐的是getItem\setItem这两种方法对其进行存取

    1. var storage=window.localStorage;
    2. //
    3. storage["a"]=1;
    4. storage.b=2;
    5. storage.setItem("c",3);
    6. //
    7. storage.clear();//删除所有内容
    8. storage.removeItem("a");//删除某个键值对
    9. //
    10. storage.a=4;
    11. //
    12. for(var i=0;i<storage.length;i++){
    13. var key=storage.key(i);
    14. console.log(key);
    15. }

    JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

    1. var data={
    2. name:'xiecanyong',
    3. sex:'man',
    4. hobby:'program'
    5. };
    6. //将JSON对象转换成为字符串
    7. var d=JSON.stringify(data);
    8. storage.setItem("data",d);
    9. //将字符串转换成为JSON对象
    10. var json=storage.getItem("data");
    11. var jsonObj=JSON.parse(json);
  • 相关阅读:
    EtherNet/IP转Modbus TCP协议网关的接口
    8-3插入排序-希尔排序/缩小增量排序
    MyBatis 的执行流程,值得一看
    Verilog 基础知识
    04、JavaWeb启程——数据库
    leetcode_260. 只出现一次的数字 III
    [数据结构]AVL树
    QString类与整型,浮点数互转
    阅读源码工具Sourcetrail
    JMeter实现接口自动化测试
  • 原文地址:https://blog.csdn.net/m0_52191385/article/details/134528681