Cookie: 1.概念：
客户端会话技术，将数据保存都客户端
2.快速入门
1.创建Cookie对象，绑定数据 2.发送Cookie
3.获取Cookie，拿到数据
3.实现原理 基于响应头set—cookie和请求头cookie的实现
4.cookie的细节 1.是否可以有多个cookie 一次可以发送多个cookie 2.cookie在浏览器中保存多长时间？
1.默认情况下，当浏览器关闭后，Cookie数据被销毁 2.持久化存储 setMaxAge(int seconds)
1.正数：将cookie数据写到硬盘的文件中持久化存储，cookie存活时间 2.负数：默认值 3.零：删除cookie信息 3.cookie是否可以中文？
tomcat8之前不可以直接存储中文数据 需要转码 tomcat8后可以使用中文存储 5.cookie的特点和作用？
1.cookie存储数据在客户端浏览器 2.浏览器对于单个cookie的大小有限制(4kb)，以及同一个域名下的总 cookie数量也有限制(20个)
作用： 1.cookie一般用于存储少量的数据 2.在不登录的情况下，完成服务器对客户端的身份识别 ————————————————
D13-cookie Cookie http（网络传输协议）https（安全） 特点： 无状态 （不知道访问者是谁） 无连接 （连接完成后会断开） 长连接/短连接 （key-alive属性来指定的）
既然我们的http协议是无状态的 那么我们怎么区分对应的访问者（孕育而出了一个sessionID 来做区分）
他访问了我 我给你一个对应的sessionID 他访问了我我同样给他一个sessionID （这个时候我们就可以通过这个sessionID来做区分）
这个sessionID是怎么给到你的呢？ 他是通过在访问的时候 给你分发一个sessionID 保存到你的机器上 （存在于你的浏览器上 cookie）sessionID是依赖于cookie进行存储的 cookie会随请求一起过去
这个时候我们的http的无状态就解决了 cookie 刚才在上面我们已经知道了对应的cookie是存储对应的sessionID 那么是不是就证明了我们的cookie是一个容器的（这个容器的大小只有4k）
是一个容器我们就有对应的增删改查的方法 cookie里面是什么样 //name是对应的cookie的名字 key=value expires 过期日期 path 访问路径（才携带cookie）
domain 跨域操作 secure 安全对应的属性有 键=值 （名字=值） expires 过期时间（关闭浏览器失效）* path 访问路径（指定对应的路径携带cookie） domain 跨域 （可以跨域的域名）
secure 安全 URI编码和解码 encodeURIComponent 编码 decodeURIComponent 解码 增删改查 添加 直接赋值 document.cookie = "key=value;"获取
采用读取字符串的形式 console.log(document.cookie.split(";")[0].split("=")[1]) //拿到value值删除 设置过期时间 document.cookie = "key=value;expires="+new Date()修改
重新设置就是修改 document.cookie = "key=hello;"cookie的特性 1.为了解决http无状态的问题 2.存储只有4k左右 3.他是存储在浏览器上 4.他会随请求携带 5.他可以被伪造和修改（不安全）
cookie和localStorage的区别 localStorage容量大于cookie localStorage存储的位置和cookie不是一个地方 localStorage对应的不会随请求携带（本地缓存） cookie 在后续的框架中也会使用
但是他使用的是对应的库（cookie.js） https://www.mianshigee.com/project/cookie-js/
localStorage的方法 getItem(key) 获取元素 setItem(key,value) 设置元素 removeItem(key) 移除元素 JSON JSON是一种数据格式（json字符串）
他通用我们对应的网络传输（xml）他是一种数据格式 而在对应的JavaScript他是一种数据类型 json俩种显示方式 对象 {} .key 数组 [] 使用下标 var jsonObj = {} var jsonArray =[]反序列化操作 (将字符串变成对象) JSON.parse() * eval() 序列化操作 （将对象变成json格式的字符串） JSON.stringify() * localstorage和cookie存储的格式（字符串）以后再存储数据的时候直接存储json格式字符串 取出的时候利用反序列化转为对象 谭帅清: 事件总笔记 事件总结 什么是事件 • 事件，就是文档或浏览器窗口中发生的一 些特定的交互瞬间。 • JavaScript 与 HTML 之间的交互是通过事 件实现的。 • 对于 Web 应用来说，有下面这些代表性的 事件：点击某个元素、将鼠标移动至某个 元素上方、按下键盘上某个键，等等。 事件构成三要素 1.触发的元素 2.事件函数(on+事件类型) 3.事件处理函数(方法) 事件书写方式 元素内部直接写 < a href='' onclick="alert('hello')">元素内部调用函数 < a href='' onclick='fn()'>使用对应的事件属性添加事件 var box =document.getElementById('box') box.onclick=function(){
} 事件类型
1.鼠标事件 点击事件 onclick (执行在按下和弹起之后)
双击事件 ondblcilck
移入事件 onmouseover (子元素也会触发)
移出事件 onmouseout
移入事件 onmouseenter
移出事件 onmouseleave
移动事件 onmousemove
按下 onmousedown
弹起 onmouseup
2.键盘事件 onkeydown
按下 onkeyup
弹起 onkeypress
按下后弹起前(字符按键 包含字母数组下划线特殊字符及回车和空格)
3.html事件
onload 加载
window里面写
onunload 卸载
window里面写
onblur 失去焦点
input写
onfoucs
获取焦点 input写
onsubmit 提交事件
form表单写
onreset 重置事件
form表单写
onselect文本内容选择事件
input和textarea
onscoll 滚动栏滚动事件
window onchange 内容修改事件
表单元素的 事件源对象 event 其实是对应的出发的事件函数里面的第一个参数
兼容写法 box.onclick=function(e){ e=e||window.event //兼容写法 }事件源对象的相关属性 button 按键按下的是哪个0 表示左键 1表示中间滚轮 2表示右键 tepe 事件类型 target
目标元素(触发事件的元素) currentTarget实际操作的元素 X 获取鼠标的X坐标 (有兼容问题 ie浏览器) 普遍是ie9之前的 Y 获取鼠标的Y坐标 (有兼容问题 ie浏览器) screenX
获取屏幕到鼠标的横轴距离 screenY 获取屏幕到鼠标的纵轴距离 pagrX 获取鼠标页面最顶部的X距离(包含滚动栏的) pageY 获取鼠标页面最顶部的X距离(包含滚动栏的)
clientX 获取鼠标离页面的可视区域的x距离 clientY
获取鼠标离页面的可视区域的Y距离 offsetX 获取鼠标在盒子里面的x坐标 offsetY 获取鼠标在盒子里面的Y坐标 ctrlKey 是否按着ctrl键 shiftKey 是否按着shift键 altKey 是否按着alt键 key
获取对应的按钮的值 code 获取按钮 keyCode 获取按钮值的ascii码(只会获取大写) charCode 获取字符编码(只会运用在keypress里面) 事件的this指向 如果是在对应的function里面的
那么this指向function的拥有者(也就是触发事件的元素) 如果他在没有对象包的情况下他指向的是window(有对象包就属于对象的拥有者没有就指向window) 阻止事件冒泡及默认行为
事件冒泡:就是触发里面的事件的时候,事件会进行向上冒泡进而触发外面的事件(事件的向上传递) 阻止事件冒泡 e.stopPropagation()//兼容问题 遵从W3c规范 e.cancelBubble=ture //ie的兼容
不遵从W3c规范(未来会被废弃) //兼容写法 e.stopPropagation?阻止默认行为 e.preventDefault()//兼容问题 e.returnValue=false//兼容 return false//后续代码不会执行
需要放在最后面写 e.offset家族 (元素的属性 只读属性不能获取) offsetParent 基于偏移的父元素 (有定位(没有定位找body)就近原则) offsetLeft 左边的偏移量 offsetTop
上面的偏移量 offsetWidth 自身宽度 offsetHeight 自身高度 事件监听器 添加 addEventListener element.addEventListener('事件名',function(){
},false)//参数1 事件名 参数2 方法 参数3 是否捕捉 默认false 为冒泡删除 removeEventLi
