• 浏览器对象存储数据详解


              浏览器对象存储数据详解

      前言  

        随着需求的发展,浏览器的功能正变的越来越强大,在本地存储数据可以极大的方便人们进行各种操作,如localStroage/sessionStroage等,下面我就记录在项目中碰到然后进行处理的方式,在以后如果有碰到相关或者有更深的理解,会进行补充。

      Cookie

        Cookie技术是客户端的解决方案,Cookie就是由服务器发给客户端的特殊信息,而这些信息以文本文件的方式存放在客户端,然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。因为HTTP是无状态的协议,因此当你下次访问时,为提高用户体验如不需要重新登陆,记录你的购物方式等,Cookie就会记录你的状态以帮助实现这些功能。

        注意: cookie存在不可跨域名性。

        document.cookie 获得一个字符串,该字符串包含所有的Cookie,每条cookie以分号分隔(即, key=value 键值对)。更详细的我们可以参考MDN介绍

        封装的增删改查Cookie方法:

    /*
    *  设置cookie  / 如果键一样则进行覆盖(改)
    *  @param  name  键
    *  @param  value   值
    *  @param  delay   有效期(单位小时,缺省6小时)
    */
    function  setCookie(name, value, delay) {
        let exp = new Date();
        exp.setTime(exp.getTime() + ( !!delay ? delay : 6 ) * 3600 * 1000 ) ;
        document.cookie = name + "=" +  escape(value) + "; expires=" + exp.toGMTString();
    }
    
    /*
    *  获取cookie
    *  @param  name
    *  @return  {*}
    */
    function  getCookie(name) {
        let ret = new RegExp(("(^| )"+name+"=([^;]*)(;|$)"));
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
         else
            return null;
    }
    
    /*
    *   删除cookie
    *   @param  name
    */
    
    function  delCookie(name)  {
        let  exp = new Date();
        exp.setTime(exp.getTime() - 3); //设置为超时
        let  cval = getCookie(name);  //获取值
        if ( cval != null ) {
            document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }
    }

       ---------20180324 补充 ----------------

        来个概念 :同源策略,它是由Netscape提出的一个著名的安全策略。同源是指,域名,协议,端口相同。

        先说明下我碰到的情况,项目有两个端,一个医生端,一个病人端,二者的域名一样,而端口不一样。在登录的时候保存登录信息到cookie中(使用如上setCookie方法,目的是利用时效性),cookie的键名称是一样的,导致的问题是同一个浏览器同时登录两个端,后面登录的cookie会把前面登录的cookie覆盖了,然后导致数据请求接口出错了。当时我是凌乱的,因为cookie是遵循同源策略的,怎么会不同端口的cookie会被覆盖或者获取到呢? 经过我的排查,我觉的原因①我使用的是document.cookie,参考MDN我发现 ;domain=domain 部分有这么一句话: 如果没有定义,默认为当前文档位置的路径的域名部分因此两个端的cookie是同一个域名,具体我们也可以通过“开发者工具”->"Application" -> "Cookie" ,发现Domain 字段都是127.0.0.1(在改了cookie键名称的情况下,有两个,否则覆盖)。②受到阮一峰老师文章的启发,我们可以通过设置document.cookie=xx 可以实现二级域名不同来实现共享Cookie ,我感觉原理是一样的。因此当我把cookie的键名称改为不同时,问题就解决了。 

        So最后结论是 cookie是遵循同源策略的,只是我们主动在浏览器端进行设置时使用document.cookie是会导致域名相同不同端口cookie是可以共享的。查看资料室发现阮一峰老师的一篇好文章   浏览器同源政策及其规避方法 。

      localStorage和sessionStorage

        在HTML 5 最开始时,本地存储有两种方式:一种是web Storage,另一种是web SQL。由于web SQL的实现是基于SQLite,它更倾向于DataBase方向,且W3C官方在2011年11月宣布不在维护web SQL规范,故其API接口目前已经不属于HTML 5的范畴。因此,目前我们常讲的HTML 5本地存储,多指的是web Storage。二者的存放数据大小为一般为5MB

        二者的区别在于sessionStorage仅在当前会话有效,关闭页面或浏览器后清除,而localStorage永久有效,即使关闭了浏览器依然存在。

        作用域不同:  不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

        封装方法如下;
        

    const SALT = '__admin__'
    
    export default {
        local: {
            get(key) {
                let strValue = localStorage.getItem(SALT + key)
                return JSON.parse(strValue)
            },
            set(key, jsonValue) {
                var strValue = JSON.stringify(jsonValue)
                localStorage.setItem(SALT + key, strValue)
            },
            remove(key) {
                localStorage.removeItem(SALT + key)
            },
            removeAll() {
                localStorage.clear()
            }
        },
        session: {
            get(key) {
                let strValue = sessionStorage.getItem(SALT + key)
                return JSON.parse(strValue)
            },
            set(key, jsonValue) {
                var strValue = JSON.stringify(jsonValue)
                sessionStorage.setItem(SALT + key, strValue)
            },
            remove(key) {
                sessionStorage.removeItem(SALT + key)
            },
            removeAll() {
                sessionStorage.clear()
            }
        }
    
    }

      浏览器缓存

        浏览器缓存的优点: (1)减少网络宽带消耗 (2)降低服务器压力(3)减少网络延迟,加快页面打开速度。

        1. 浏览器缓存的类别

          强缓存:用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。

          协商缓存: 用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。 

          缓存的真面目: 我们以chrome为例, 输入chrome://cache,里面有很多的文件路径,可以点击进去,可以看到缓存的内容和表现形式。

        2.浏览器缓存涉及到的HTTP信息

          如expires/Cache-Control/Last-modified/Etag等字段,参考“参考文献”。有写的非常详细的内容

        3.用户行为导致的浏览器缓存行为

        

        4.原理

          参考下文献,讲解的非常详细。

        5.补充

          jQuery中的$.ajax方法中,有cache参数/ifModified参数与缓存有关。

          cache参数:  默认情况下,请求总是会被发出去,但浏览器有可能从它的缓存中调取数据。要禁止使用缓存结果,可以设置cache为false。

                描述: (默认true, dataType为script和jsonp时默认为false)  jQuery 1.2新功能,设置为false将不缓存此页面。

          ifModified参数: (默认false) 仅在服务器数据改变时获取新数据。使用HTTP包 Last-Modified头信息判断。在jQuery 1.4中,它也会检查服务器指定的"etag"来确定数据没有被修改过。

          更详细内容,可参考jQuery API 中文文档

      参考文献

        https://www.cnblogs.com/shixiaomiao1122/p/7591556.html  彻底理解浏览器缓存机制

        https://segmentfault.com/a/1190000011212929#articleHeader5  浏览器缓存-前端随笔

        https://www.cnblogs.com/slly/p/6732749.html  浏览器缓存机制详解

  • 相关阅读:
    教你写能被舒服舒服又舒服地调用的iOS库
    无比迅速敏捷地开发iOS超精美控件
    iOS中UIlabel多行文本展示使用小结
    诸葛亮诫子书
    保留开阔的心灵空间
    iOS长按手势列表拖拽功能实现
    iOS通知使用小结
    真正的成熟
    生活的常态
    记一次LNMP 502问题的解决 (Nginx 、php、php-fpm)
  • 原文地址:https://www.cnblogs.com/cleaverlove/p/8531050.html
Copyright © 2020-2023  润新知