JS 操作 5

图片懒加载

1 作用 -- 图片按需加载减少请求压力

2 设置
  1 设置自定义属性 data-src 保存src 的路径, 需要的时候传给 src -- 就是阻止图片的加载
  2 判断图片是否进入或快进入可视区
	1 获取页面被卷去头部的长度, 获取可视区的高度, 循环判断img的位置是否进入可视区, 把以上步骤在一个函数内执行
	2 一入页面调用一次, 添加滚动条事件 --> 来执行这个函数  (使用节流来优化)
  3 使用 -- Tools --> JS --> xTools --> 3-图片懒加载     --> 改俩个位置就可以轻松实现效果

图片预加载

1 作用 -- 通过占位图解决网速较慢视觉空白问题, 提升用户体验
2 使用 -- Tools --> JS --> xTools --> 4-图片预加载  

cookie

1 说明: cookie -- 是由web服务器存储在用户电脑硬盘上的一个小的文本文件 -- 浏览器机制 -- 可通过JS操作

2 作用: 
  1 访问一个网站时, 存储一些用户信息; 
  2 下次访问该网站的时候, 服务端可以通过http请求, 直接读取到这些信息并使用
  
3 特点:
  1 跨页面 -- 同域名 -- 共享数据
  2 可以设置有效期
  
4 缺点:
  1 大小限制 4K, 约等于 50条  --  存储空间小
  2 安全性不够高
  3 每次HTTP请求, 都会发送给服务器
  
5 cookie--和--localStorage的区别:
  1 cookie 相对安全, 适合存储敏感信息 -- 浏览器对cookie有一定的保护机制 -- localStorage 没有保护
  2 cookie 可存储空间小 4K左右 -- localStorage 20M
  3 cookie 没有方便操作的 API -- localStorage 有
  4 cookie 存储的数据是有有效期的 -- localStorage 永久保存

localStorage

1 说明: 在本地存储一些数据, 需要的时候就可以去拿了 (是 window下的对象)

2 特点
  1 跨页面 -- 同域名 -- 共享数据
  2 大小限制 20M
  3 要以字符串的形式存储 -- 配合 jsonp方法
  
3 操作 API
  1 储存数据  localStorage.setItem("key", "value")
  2 获取数据  localStorage.getItem("key")
  3 删除数据  localStorage.removeItem("key")
  4 删除所有数据  localStorage.clear()
  
4 代码操作
  let obj = {
    
    a:123, b:456};
  localStorage.setItem("user", JSON.stringify(obj));   //存储
  let hh = JSON.parse(localStorage.getItem("user"));   //取出

sessionStorage

1 数据生命周期为关闭浏览器窗口
2 在同一个窗口(页面)下数据才可以共享
3 大小限制 约5M
4 API 方法是差不多的 -- 不常用

让 input只能输入数字

input: 输入时触发的事件

ipt.addEventListener('input', function() {
    
    
	this.value = this.value.replace(/[^\d]/g,'')
    if(ipt.value >1000) {
    
     ipt.value = 1000 }  //也可以做其他的限制
})

判断数据类型

1 通过构造器的方式判断
-----------------------------------------------------------------------------------
    var str = 'abc'
    var num = 123
    var boo = true
    var arr = [1, 2, 3] 
    var obj = {
    
    }
    var fun = function() {
    
    }
    var nul = null
    var und;

    console.log(Object.prototype.toString.call(str))  // '[object String]' 
    console.log(Object.prototype.toString.call(num))  // '[object Number]' 
    console.log(Object.prototype.toString.call(boo))  // '[object Boolean]' 
    console.log(Object.prototype.toString.call(arr))  // '[object Array]' 
    console.log(Object.prototype.toString.call(obj))  // '[object Object]' 
    console.log(Object.prototype.toString.call(fun))  // '[object Function]' 
    console.log(Object.prototype.toString.call(nul))  // '[object Null]' 
    console.log(Object.prototype.toString.call(und))  // '[object Undefined]' 
-----------------------------------------------------------------------------------