H5新增属性&存储技术

1.HTML5语义化标签

1.1 标签语义化概念

语义化：顾名思义，看见名字就知道用途
标签语义化：简单理解，正确的标签做正确的事情

优点：
1.标签语义化
2.SEO优化有显著的支持效果

1.2 H5语义化标签

 标签名               作用               
 ------------------- | ------------------ 
 <header></header>   | 定义网页头部       
 <nav></nav>         | 导航栏             
 <main></main>       | 定义网页主体      
 <section></section> | 定义网页区域、段落 
 <article></article> | 定义网页文章内容  
 <aside></aside>     | 定义网页侧边栏     
 <footer></footer>   | 定义页脚           

1.3 H5输入框属性【了解】

2. H5自定义属性【掌握】

// 1.原生属性
<div id="属性值"></div>
node.属性名 // 获取属性值
node.属性名 = 属性值 // 设置属性值
例：node.className = 'test'

// 2.非标准自定义属性
<div myname="属性值"></div>
node.getAttribute('属性名') // 获取属性值
node.setAttribute('属性名', '属性值') // 设置属性值

// 3.H5自定义属性 标准自定义属性
<div data-name="属性值" data-myname="属性值" data-属性名 ></div>
node.dataset.属性名 // 获取属性值
node.dataset.属性名 = 属性值 // 设置属性值
node.getAttribute('data-属性名') // 这种方式也可以获取到H5自定义属性的属性值，但要加前缀data-
node.setAttribute('data-属性名', '属性值') // 这种方式也可以设置H5自定义属性的属性值，但要加前缀data-

3.Web存储技术

3.1 cookie、sessionStorage、localStorage之间的区别【面试题】

cookie 临时存储
容量：4kb左右
存储方式：字符串形式，以';'隔开
作用：存储用户相关信息
缺点：容量小，由于交互时需要时常带上cookie，所以有安全隐患

sessionStorage 会话存储
容量：5mb
存储方式：序列化后的字符串
作用：存储用户在一次窗口中的相关数据
开始：打开窗口会话时，进行存储
结束：关闭窗口会话时，会被销毁

localStorage 永久存储
容量：5mb
存储方式：序列化后的字符串
作用：在浏览器本地进行持久化地存储相关信息
开始：当进行存储时就存在
结束：用户手动删除或脚本执行删除时才被销毁

3.2 localStorage的四种方法【重点】

    键名要用字符串型("")
    // 设置数据
    localStorage.setItem(键名, 键值)
    // 获取数据
    localStorage.getItem(键名) 有 返回值   return
    // 删除指定数据
    localStorage.removeItem(键名)
    // 全部清除
    localStorage.clear()

    注意：
    1.获取getItem和指定删除removeItem时必须要传存储时一样的键名，才能获取和删除到！！！
    2.存储对象类型数据时必须要进行JSON序列化stringify，否则数据会丢失！！！
    3.获取对象类型数据时必须要进行JSON解析parse,否则无法正常使用对象的属性！！！
    4.设置时要先序列化stringifys再设置setItem；获取时要先获取getItem，再解析parse！！！

4.JSON的两种核心方法【重点】

    1.序列化
    JSON.stringify(对象)：将 对象 转换为 对象字符串
    2.解析
    JSON.parse(对象字符串)：将 对象字符串 转换为 对象