初学JS第十天

勤学苦练的小白
141 阅读7分钟

1. BOM的本地存储(localStorage和sessionStorage)

  1. localStorage特点:

    • 浏览器本地存储类型，持久存储，一旦存储永久存在
    • 只能存储基本数据类型（一般是字符串类型），其他数据类型要转成字符串类型存储
    • 能够跨页面通讯：在A页面存储的本地信息可以在B页面中获取到

  2. localStorage的语法：

    • 创建一个本地存储：
    var str = 'a, b, c, d'
window.localStorage.setItem('str', str) // 此时含义是创建一个本地存储名字叫做str，调用变量str内的值给它当做它的值
window.localStorage.setItem('str1', 'str') // 此时含义是创建一个本地存储名字为str1，它的值是字符串str
    • 删除一个本地存储信息：
    var str = 'a, b, c, d'
window.localStorage.setItem('str', str) // 此时含义是创建一个本地存储名字叫做str，调用变量str内的值给它当做它的值
window.localStorage.removeItem('str') // 此时含义是删除一个本地存储变量名为字符串str的存储信息
    • 清空本地存储：
    var str = 'a, b, c, d'
window.localStorage.setItem('str', str) // 此时含义是创建一个本地存储名字叫做str，调用变量str内的值给它当做它的值
window.localStorage.setItem('str1', 'str') // 此时含义是创建一个本地存储名字为str1，它的值是字符串str
window.localStorage.clear() // 此时含义是将本地存储的所有信息都清除
    • 查询本地存储信息：
    var str = 'a, b, c, d'
window.localStorage.setItem('str', str) // 此时含义是创建一个本地存储名字叫做str，调用变量str内的值给它当做它的值
var a = window.localStorage.getItem('str') // 此时含义是定义一个变量a去接收key叫做'str'的value，有的话返回值是它的value,没有的话返回null
    • 存储引用数据类型：
    var obj =  {
  name : 'zhangsan',
  age: 18
}
obj = JSON.stringify(obj) // 此时这个JSON会将对象数据类型转换成字符串类就可以存储了
obj = JSON.prase(obj) // 此时这个JSON会将字符串类型转换成他原本的类型

  3. sessionStorage与localStorage的区别：

* 浏览器的本地存储：临时存储，关闭浏览器后存储内容消失

* 如果是想要跨页面通讯必须是从本页面打开的才可以

* 功能：增，删，清除，获取和localStorage一样，语法也差不多

2. 本地存储的cookie

  1. 注意事项：

    • 只能存储字符串，并且有固定的格式为：key = value 或 a = 100, 这种格式

    • 存储大小有限制，4KB左右

    • 操作cookie必须依赖服务器（本地启动文件不能运行cookie，可以借助Live Serve插件）

    • 跟随前后端交互，自动携带：前端向后端发送请求时，如果cookie有数据会自动携带

    • 前后端操作差别：前端只有JS可以操作cookie，后端任何一个语言都可以操作cookie

    • 存储依赖域名：哪一个域名存储，哪一个域名可以用，不能跨页面通讯

  2. cookie的一些操作：

    • 设置一个cookie：
    document.cookie = 'qq = 12345' // 此时这个代码含义是设置一个内容为qq = 12345字符串的cookie
    • 获取cookie：
    document.cookie = 'qq = 12345' // 此时这个代码含义是设置一个内容为qq = 12345字符串的cookie
console.log(document.cookie) // 这个代码含义是获取一个cookie中的内容

    • cookie的有效期 默认是会话级别（浏览器关闭，自动删除）可手动添加一个过期时间

    • 设置一条有过期时间的cookie

    document.cookie = 'qq = 12345;expires ='+ timer
    • 设置一条30s后过期的cookie
    var timer = new Date()
timer.setTime(timer.getTime() + 30 * 1000 - 8 * 3600 * 1000) // 东八区
document.cookie = 'qq = 12345; expires =' + timer
    • cookie的有效期： 设置时间的时候是按照世界时间来的，中国为东八区多以需要把时间轴的时间往前调整八小时

3. cookie和storage的区别：

  1. 出现时间： * cookie：有JS时就存在了 * storage：H5出现后才存在

  2. 存储大小： * cookie：4kb左右 * storage：20MB/5MB

  3. 前后端交互： * cookie：请求时自动携带 * storage：请求时不会自动携带，可以手动携带

  4. 前后端操作： * cookie：前后端都可以操作 * storage：只有前端的JS可以操作

  5. 过期时间： * cookie：会话级别，可以手动设置过期时间 * storage：不能手动设置过期时间

  6. 两个storage的区别： * 过期时间： localStorage：永久存储 sessionStorage：临时存储

* 跨页面通讯：

localStorage：直接跨页面通讯
sessionStorage：只能从当前窗口跳转过的页面才能通讯

* 共同点：
只能存储字符串，不能存储复杂数据类型
直接存储其它数据类型，获取回来时字符串类型

4.DOM:

  1. 定义：文档对象模型，其实就是一些操作HTML的能力

  2. 核心：DOM的核心就是document

  3. document对象是浏览器内置的一个对象，里面存储的是用来操作元素的各种方法

  4. 获取页面中的元素（非常规元素）

* html

```js
var htmlEle = document.documentElement
console.log(htmlEle)
```

* body
```js
var bodyEle = document.body
console.log(bodyEle)
```

* head
```js
var headEle = document.head
console.log(headEle)
```

5. 获取页面中的常规元素：

* 通过元素的ID名获取元素
```js
var id = document.documentById('Id名')
```

* 通过元素的class名获取元素
```js
var cla = document.documentsByClassName('class名') // 打印的是伪数组但是可以通过小标获取其中的DOM节点
```

* 通过元素的标签名获取元素
```js
var tag = document.documentsByTagName('标签名') // 打印的是伪数组形式标签
```

* 类似css选择器获取标签
```js
var a = document.querySelector('css中的写法') // 取第一个符合条件的标签
```

* 所有的标签
```js
var b = document.querySelectorAll('css中写法')
var arr = [...b] // 可以将伪数组变成真数组，伪数组不能用数组常用方法只能用forEach但是不推荐使用
```

6. 操作元素的属性

  • 获取到DOM节点后可以直接操作节点属性并且渲染到页面中

  • .innerHTML可以获取到标签的内部结构

节点.innerHTML = '<span>我是内部的结构</span>' // 可以修改节点内部结构设置时会解析字符串内的HTML标签
  • .innerText可以获取到标签内部文本
节点.innerText = '我是标签内部文本' // 可以将标签内部文本修改为此文本不识别标签
  • 获取元素的某个属性（自定义属性也可以）自定义：自己写的不是提供的语法
节点.getAttribute('某个属性') // 获取节点的某个属性对应的值
  • 设置元素的某个属性
节点.setAttribute('某个属性名'， 属性值) // 新增的属性若与原属性属性名会覆盖原属性
  • 删除元素的某个属性
节点.removeAttribute('属性名')
  1. H5自定义属性
* 属性是data - 后边的内容如果H5自定义属性为data - id = 'QF001'那么属性名是id， 属性值是'QF001',data作用是仅表示这是一个H5自定义属性

* 增加
节点.dataset.属性名 = '属性值' 

* 删除
delete 节点.dataset.属性名

* 获取
console.log(节点.dataset) // 获取一个类似于对象的东西
console.log(节点.dataset.属性) // 获取属性值

* style
专门给某个元素加css样式的，添加的是行内样式
节点.style.属性 = 属性值
JS中写css样式 - 不要，要用驼峰命名法

* className
专门操作元素类名
节点.className // 获取元素类名
节点.className = '新类名' ， 缺点：会直接覆盖原类名不管有几个

* classList
可以获取多个类名
节点.classList.add('类名') // 添加类名
节点.classList.remove('类名') // 删除雷鸣

* 对象名.属性 = 属性值 // 给对象属性赋值
* 节点.属性 = 属性值 // 给节点属性赋值
avatar
文章
阅读
粉丝