JS-10（cookie，存储区别，DOM）
sessionStorage
是浏览器本地存储的一种方案，是临时储存，当浏览器关闭的时候，存储的内容，自然清空。跨页面通讯，必须是从当前页面跳转过去的页面才能实现通讯。
- 增：window.sessionStorage.setItem(' shao', ' 邵州')
- 查：window.sessionStorage.getItem('xxx') console.log（xxx）
- 删除：window.sessionStorage.removeItem('xxx')
- 清空：window.sessionStorage.claear()
cookie
1.只能存储字符串，并且有自己固定的格式，
- key=value； key2=value2
2..存储大小有限制4kb左右
3.存储具有时效性，默认是会话级（sessionStorage），但是我们也可以指定过期时间
4.操作必须以来服务器，目前可以借助liveserver启动页面，不要本地的方式启动
5.前端后通讯的时候会自动携带cookie，前端像后端发起请求的时候，会自动把cookie内部存储的数据发送给后端
6.前后端语言都可以操作
7.存储依赖域名，同一个域名内可以通讯，否则不行
cookie过期时间
本地存储之间的区别
1.出现时间：
- cookie有JS的时候就有了
- storage有H5的时候才有的
2.存储大小
- cookie 4kb左右
- storage 4mb-20mb
3.前后端交互
- cookie 交互时会自动传递给后端
- storage 交互式不会自动传递给后端，除非手动携带
4.前后端操作
- cookie 前后端语言都可以操作
- storage 只能前端语言操作
5.过期时间
- cookie 可以手动知道过期时间，也有默认的过期时间
- storage 没有过期时间
两个 storage 之间的区别
-
localStorage
- 过期时间：持久化存储，除非手动删除
- 跨页面通讯：能够完成
-
sessionStorage
- 过期时间：临时存储，关闭浏览器的时候数据就会被清空
- 跨页面通讯:只有从当前页面跳转过去的页面才能完成
-
共同点
- 都必须存储字符串
- 存储其他数据类型的时候，需要借助JSON的方法进行一个转换
DOM
DOM 文档对象模型
- JS 运行到 HTML 文件中， 由 HTML 文件提供了 DOM的能力
- 比如：添加一个div
- 删除一个li
- 修改一个ol
- 获取某一个标签的样式，或者修改某一个标签的样式
- 给某一个标签添加事件
- 给某一个标签添加属性
DOM的核心是document
- document 是JS内置的一个对象，内部提供了很多属性和方法，帮我们便捷的操作页面标签
- 1.文档类型模型
- 2.标签
获取标签
-
语法1：
- document.querySelector（‘像写CSS选择器一样书写标签’），返回值：符合条件的第一个标签
-
语法2：
- document.querySelectorAll（‘一样’） ， 返回值：返回一个符合条件的标签组成的伪数组
获取样式
- 元素/标签.style 能够拿到 行内 样式， 或者给添加一个行内样式
- getComputedStyle（‘要查询样式的标签’）.要查询的样式名，能够获取到元素的样式（行内合肥行内都可以），但是获取到的内容是只读的，只允许查询，不允许修改
修改元素的样式
- Div.style.width = ‘ 200px’
- Div.style.backgroundColor = ‘red’
操作元素类名
-
元素/标签.className
- 能够得到元素目前拥有的类名，还可以给这个属性重新赋值，然后修改当前标签的类名
-
元素/标签.classList
- 返回值 是一个伪数组，数组内下标对应的是我们每一个类名value属性对应的是我们完整类名的字符串
操作元素属性
-
获取标签属性
- console.log（box.getAttribute（‘class’））
-
设置标签属性
-
增：添加 ：box.setAttribute（‘myjia’， ‘这是通过JS添加的一个自定义属性’） ，或 box.setAttribute（‘class’ ， ‘qf001’）
-
H5新增自定义属性
- h5 自定义属性在书写的时候有一个固定的开头就是data- ；
- 完整语法： data-属性名=属性值
- 获取语法：元素/标签.dataset.属性名
-
