本地存储（面试必问）

*   1、localStorage : 浏览器的本地存储（永久存储），打开浏览器上之后，关闭浏览器，信息还在。
    2、sessionStorage
    3、cookie

1、localStorage的存储语法 window.localStorage.setIem(key,value)

参数key：书写符合见名知意
参数value：必须为字符串

localStorage的删除语法 window.localStorage.removeItem(key)

localStorage的清除语法 window.localStorage.clear()   全部清除

localStorage的获取语法 window.localStorage.getItem(key)

2、sessionStorage 浏览器的临时存储特点：页面关闭直接清除数据

设置语法：window.sessionStorage.setItem(key,value)
        value的值只能是字符串

设置语法：window.sessionStorage.getItem('vx')

删除语法：window.sessionStorage.removeItem('vx')

清楚语法：window.sessionStorage.clear()

3、cookle 只能在用服务器启动的页面中正常使用特点：页面关闭直接清除、可设置过期时间

     语法：document.cookle = 'key = value'
     设置多条的时候 cookle 分开写
     设置一条有过期时间的cookle
            document.cookle = 'key = value ; expires = ' + timer

        此时我们设置的过期时间为东八区时间，但浏览器是按世界时间去设置的，此时我们就需要先将时间往后调整8小时，再加上需要设置的过期时间。
        var timer = new Date()  //获取当前时间
        timer = timer.getTime() - 1000*60*60*8 + 20*1000    //设置标准过期时间
        document.cookle = ' key = value expires = ' + timer;

cookle与storage的区别（面试题）

  1、出现的时间：
      cookle：有js的时候就有了
      storage：有H5的时候才有的
  2、存储大小
      cookle：4kb
      storage：20MB
  3、前后端交互（前端向后端发送请求）
      cookle：交互时请求默认携带cookle
      storage：交互请求不会携带，除非前端人员配置传递
  4、前后端操作
      cookle：不管前端还是后端语言都可以操作
      storage：只能由前端语言操作（js）
  5、过期时间
      cookle：默认会话的，页面关闭存储消失，可以通过手动配置
      storage：不能通过手动配置
                  localstorage：永久，除非手动删除。
                  sessionstorage：会话级别，关闭页面后存储消失

DOM : 对页面删除一个节点增加一个节点

一、获取非常规DOM（HTML,Body，head）

1、获取HTML：document.documentElement
2、获取head：document.head
3、获取body：document.body

二、获取常规元素：获取常规元素时与css一样，可以通过类名、标签名、ID名 1、通过类名获取标签：

    语法：oBox = document.getElementsByClassName('类名')

    oBox是一个伪数组，想要获取到某一个元素，可以通过下标
    伪数组：长得和数组相似，有下标有长度，当时不能用数组方法。
    不管页面具有这个类名的元素有多少个，获取到的都是伪数组

2、通过标签名获取标签

    语法：oDiv = document.getElementsByTagName（'标签名'）
    获取到的是伪数组

3、通过ID名获取标签

    语法：oBox = document.getElementById('ID名')
    由于id是唯一的，所以获取到的obox就是一个具有ID名的标签，而不是伪数组

4、通过选择器方式获取标签

    语法：document.querySelector('div')获取满足条件的第一个标签
    documet.querySelectorAll('box')获取所有满足条件的标签。

设置元素属性

   innerHTML:获取内部的文本与HTML结构（会识别字符串当中的html结构会把它当作标签）
   inmerText:只能获取到标签内部的文本（不会识别标签，只会识别成字符串）

获取元素的某些属性

1、获取元素：document.getElementsByClassName('div')

2、获取元素当中的某些属性：

    语法：元素.getAttribute('要查询的属性名')

3、设置元素的某些属性

    语法：元素.setAttribute('要设置的属性名'，'要设置的属性值')

4、移出元素的某些属性

    语法：元素.removeAttribute('要删除的属性名')

H5自定义属性

        <div class='box' data-cs='123456789'></div>
        data-cs = '123456789'
        H5自定义属性中data是固定的
        cs是我们实际的属性名
        '123456789'是实际的属性值

1、获取H5自定义属性

    语法：元素.dataset.属性名

2、设置属性（可做修改和新增）

    语法：元素.dataset.属性名 = '新值'

3、删除

    语法：delete 元素.dataset.属性名

本地存储