• 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存储的数据也就被清空了

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

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

    var storage=window.localStorage;
    //增
    storage["a"]=1;
    storage.b=2;
    storage.setItem("c",3);
    //删
    storage.clear();//删除所有内容
    storage.removeItem("a");//删除某个键值对
    //改
    storage.a=4;
    //查
    for(var i=0;i<storage.length;i++){
        var key=storage.key(i);
        console.log(key);
    }

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

    var data={
        name:'xiecanyong',
        sex:'man',
        hobby:'program'
    };
    //将JSON对象转换成为字符串
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    //将字符串转换成为JSON对象
    var json=storage.getItem("data");
    var jsonObj=JSON.parse(json);
  • 相关阅读:
    BOM 事件 navigator浏览器的判断
    闭包
    超简单超实用的走马灯效果实现
    对DOM的增删改查
    SVN版本回退与常用命令总结
    mongodb使用总结
    如何理解 IE 的文档兼容模式
    软件开发编码规范
    第一篇绑定数据 CMS
    关于IIS7.5下的web.config配置的一些问题
  • 原文地址:https://www.cnblogs.com/conglvse/p/9521953.html
Copyright © 2020-2023  润新知