• localStorage兼容方案


    localStorage是H5的存储方案,各大浏览器支持都相当不错,唯一悲催的就是IE,这个浏览器界的另类总是显得格格不入。

    IE “Internet选项”->“安全”中有一个“启动保护模式”的单选项,在选中的情况下localStorage是无法使用的,直接提示“拒绝访问”,就算不勾选,下次打开IE时也很有可能弹出“是否启用保护模式”的提示,此时除了做兼容没有更好的办法

    兼容方案一:userData

    userData是IE专属的浏览器存储机制,注意IE8+不支持(你说悲催不悲催)。userData的原理网上很多,就不再赘述,您可以点击下方有参考资料查看,这里直接贴出代码

    var box = document.body || document.documentElement || document.getElementsByTagName('head')[0];
    var o = document.createElement("input");
    o.type = "hidden";
    o.style.display = "none";
    o.addBehavior("#default#userData");
    box.appendChild( o );
    var exDate = new Date();
    exDate.setDate(exDate.getDate()+365);
    o.expires = exDate.toUTCString();//设定过期时间
    var FileName = "localStorageKeyCache";
    var cacheName = "kv";
    
    o.setAttribute( cacheName , data.join(",") );
    o.save( FileName );
    
    o.load( FileName );
    var getData = o.getAttribute( cacheName );
    if( getData ){
       console.log( getData );
    }
    

    userData本质上是一个文件,因此存储的时候需要提供文件名,然后就可以通过setAttribute设置key/value,删除可以通过removeAttribute方法,不管对userData做什么修改最后都需要通过save()方法进行保存

    读取userData必须先用load()方法加载文件,然后用getAttribute获取

    由于userData仅支持IE8以下的浏览器,IE9,10,11就的另想办法

    兼容方案二:cookie

    cookie一直都是localStorage兜底的办法,不管哪个版本的IE都支持,只可惜存储的数据少了点。cookie存储数据网上很多教程,这里不再赘述

    总结:

    localStorage兼容,简单的就直接判断能用就用,不行就用cookie,个人感觉userData实在鸡肋,直接用cookie更方便

    参考资料:

    http://www.cnblogs.com/xiaohuochai/p/6595959.html

    http://www.cnblogs.com/QLeelulu/archive/2008/03/29/1129322.html

    http://blog.csdn.net/csyuyaoxiadn/article/details/12836955

  • 相关阅读:
    Vue 04
    Vue小练习 03
    Vue 03
    Vue小练习 02
    Vue 02
    Vue 小练习01
    Vue 01
    Django 11
    JUC(一):volatile关键字
    Kubernetes【K8S】(五):Service
  • 原文地址:https://www.cnblogs.com/diantao/p/6616537.html
Copyright © 2020-2023  润新知