BOM 对象 & localStorage & cookie &

2019-03-24 本文已影响0人 antimony

window.onload 和 document.onDOMContentLoaded 有什么区别？

区别：

//页面所有资源加载完成
  window.onload = function(){
    console.log('window loaded')
  }

  //DOM 结构解析完成
  document.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded ')
  })

window.onload：当页面上所有资源全都加载完成才触发 onload，触发时机特别晚；
document.onDOMContentLoaded：DOM 的结构渲染完成就触发，而不是页面上的资源加载完成才触发。

如何获取图片真实的宽高？

<img src="https://img.haomeiwen.com/i3624093/96b6fd4aca7fa30e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">

    <script>
      function $(selector){
        return document.querySelector(selector);
      }

      $('img').onload = function(){
        console.log(getComputedStyle(this).width);
      }
    </script>

如何获取元素的真实宽高？

<style>
  div{
    height: 100px;
    width: 200px; 
    color: #fff;
    background-color: #000;
  }
</style>
<div>abcabc</div> 
<script>
var div = document.querySelector('div);
console.log(getComputedStyle(div).width); // 200px
console.log(getComputedStyle(div).height); // 100px
</script>

URL 如何编码解码？为什么要编码？

为什么要编码
在因特网上传送URL，只能采用ASCII字符集
也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，即
只有字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*'()[不包括双引号]、以及某些保留字（空格转换为+），才可以不经过编码直接用于URL
这意味着如果URL中有汉字，就必须编码后使用。但是麻烦的是标准的国际组织并没有规定具体的编码方法，而是交给应用程序（浏览器）自己决定。这导致"URL编码"成为了一个混乱的领域。
如果包含中文，其实会自动编码的。

示例
URL 如何编码解码
URL编码通常也被称为百分号编码（percent-encoding），是因为它的编码方式非常简单：
使用%加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制形式。URL编码要做的，就是将每一个非安全的ASCII字符都被替换为“%xx”格式，
对于非ASCII字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码。
如"中文"使用UTF-8字符集得到的字节为0xE4 0xB8 0xAD 0xE6 0x96 0x87，经过Url编码之后得到"%E4%B8%AD%E6%96%87"

.+ %20
./ %2F
.? %3F
.% %25
.# %23
.& %26

URL的编码/解码方法

JavaScript提供四个URL的编码/解码方法。

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

区别

encodeURI方法不会对下列字符编码

1\. ASCII字母
2\. 数字
3\. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码

1\. ASCII字母
2\. 数字
3\. ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大。

实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

 encodeURI("[http://blog.jirengu.com/?cat=11&a=饥人谷](http://blog.jirengu.com/?cat=11&a=%E9%A5%A5%E4%BA%BA%E8%B0%B7)");
 //"[http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7](http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7)";

其中，汉字被编码。但是如果你用了encodeURIComponent，那么结果变为

"http%3A%2F%2Fblog.jirengu.com%2F%3Fcat%3D11%26a%3D%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7"

补全如下函数，判断用户的浏览器类型。

function isAndroid(){
}
function isIphone(){
}
function isIpad(){
}
function isIOS(){
}

function isAndroid(){
  return /Android/.test(navigator.userAgent);
}
function isIphone(){
  return /Iphone/.test(navigator.userAgent);
}
function isIpad(){
   return /Ipad/.test(navigator.userAgent);
}
function isIOS(){
   return /(Iphone)|(Ipad)/i.test(navigator.userAgent);
}

通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且无法保证未来的适用性，更何况各种上网设备层出不穷，难以穷尽。所以，现在一般不再识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的JavaScript功能。

cookie & session &localStorage 分别是什么？

一、cookie

cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用「document.cookie」查看你当前正在浏览的网站的cookie。
cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法。（打开一个网站，清除全部cookie，然后刷新页面，在network的Response headers试试找一找set-cookie吧）
每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。
一般浏览器存储cookie 最大容量为4k，所以大量数据不要存到cookie。
设置cookie时的参数：
- path：表示 cookie 影响到的路径，匹配该路径才发送这个 cookie。expires 和 maxAge：告诉浏览器 cookie 时候过期，maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie，session cookie 是 transient 的，当用户关闭浏览器时，就被清除。一般用来保存 session 的 session_id。
- secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
- httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true，这样可以避免被 xss 攻击拿到cookie。[cookie 参数][简述 Cookie 是什么]

二、session
当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就使用了session保存状态。用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。

创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
当下次刷新页面时，发送的请求会带上这条cookie，服务端在接收到后根据这个session_id来识别用户。
cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。二者不是同一维度的东西。

三、localStorage
localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
不参与网络传输。
一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

使用 localStorage封装一个 Storage 对象，达到如下效果：

Storage.set('name', '饥人谷') 
Storage.set('age', 2, 30) ;  //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘饥人谷’
Storage.get('age')     //  如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers')  //如果不超过60秒，返回数组； 如果超过60秒，返回undefined

var Storage = (function(){
  return {
    set: function(key, value, expireSeconds){
      localStorage[key] = JSON.stringify({
        value: value, 
        expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
      })
    },
    get: function(key){
      if(localStorage[key] === undefined){
        return
      }
      var o = JSON.parse(localStorage[key])
      if(o.expired === undefined || Date.now() < o.expired){
        return o.value
      }else{
        delete localStorage[key]
      }
    }
 }