H5自定义属性、存储技术

今日目标

1.重点掌握HTML5自定义属性（设置、获取）

2.精通本地存储技术

3.通过应用场景对之前JS的基础有更深刻的认识

1.H5语义化标签

1.1 什么是h5标签语义化【面试题】

见名知义，正确的标签做正确的事情，如h1~h6用来放标题，p用来放段落

1.2 h5新增了哪些语义化标签【面试题】

<header></header> 用来定义网页内容的头部
<nav></nav> 用来定义导航栏
<main></main> 用来定义网页主体部分
<aside></aside> 用来定义网页的侧边栏
<section></section> 用来定义网页的片段
<article></article> 用来定义网页文章、内容区域
<footer></footer> 用来定义网页的尾部

2.H5输入类型

输入类型	含义
date	日期选择框
email	邮箱框
number	数字框
search	搜索框

3.H5自定义属性

3.1 获取属性

	// 1.标准属性
	node.属性名
	// 2.非标准属性
	node.getAttribute('属性名')
	// 3.H5自定义属性
	node.dataset.属性名
	node.dataset['属性名']

3.2 设置属性

	// 1.标准属性
	node.属性名 = 值
	// 2.非标准属性
	node.setAttribute('属性名', 值)
	// 3.H5自定义属性
	node.dataset.属性名 = 值
	node.dataset['属性名'] = 值

4.web存储

4.1 cookie、localStorage、sessionStorage它们三者之间的区别【面试题】

__cookie__用户信息

大小:4kb
生命周期：
开始：存储数据时存在
结束：倒计时结束时销毁
存储数据：一般以字符串进行存储，以';'进行间隔

__localStorage__永久存储

大小：5mb
生命周期：
开始：存储数据时存在
结束：主动删除时销毁
存储数据：以对象字符串的形式进行存储

__sessionStorage__会话存储

大小：5mb
生命周期：
开始：存储数据时存在
结束：窗口关闭时销毁
存储数据：以对象字符串的形式进行存储

4.2 localStorage存储

	// 获取本地永久存储
	localStorage.getItem('键名')
	// 设置本地永久存储
	localStorage.setItem('键名', 键值)
	// 根据指定键名删除对应的值
	localStorage.removeItem('键名')
	// 全部清除
	localStorage.clear()

4.3 sessionStorage存储

	// 获取会话存储
	sessionStorage.getItem('键名')
	// 设置会话存储
	sessionStorage.setItem('键名', 键值)
	// 根据指定键名删除对应的值
	sessionStorage.removeItem('键名')
	// 全部清除
	sessionStorage.clear()

5. JSON的两种方法

	JSON.stringify(obj) // 转换为对象字符串
	JSON.parse(string) // 转换为真对象

6.封装对象函数

// 本地存储
const local = {
	// es5的方法
	// 方法名:function(){}
	/**
	 * @description 根据键名获取本地存储数据
	 * @param [ key ] 键名
	 * @returns 本地存储数据
	 */
	getItem: function (key) {
		return JSON.parse(localStorage.getItem(key));
	},

	// es6的方法
	// 方法名(){}
	/**
	 * @description 设置本地存储数据
	 * @param [ key ] 键名
	 * @param [ value ] 键值
	 */
	setItem(key, value) {
		localStorage.setItem(key, JSON.stringify(value));
	},

	/**
	 * @description 根据键名清除本地存储数据
	 * @param [ key ] 键名
	 */
	removeItem(key) {
		localStorage.removeItem(key);
	},

	/**
	 * @description 清空本地存储数据
	 */
	clear() {
		localStorage.clear();
	},
};

7.搜索记录思路

1.获取相关节点
2.获取搜索框的值
	2-1 存入本地永久存储
    	2-2 本地存储有值时
        	获取本地存储
            	JSON.parse()
        	在存储的基础上继续添加
            	array.unshift()
			存入本地
            	JSON.stringify()
		 2-3 本地存储没有值时
         	准备一个空数组
            	let array = []
            将搜索的值放入数组
            	array.unshift()
            存入本地
            	JSON.stringify()

8.封装渲染函数

	1.完成渲染功能
		1) 获取本地搜索记录
		2) 遍历记录拼成html标签
		3) 将拼接好的标签放入ul
	2.定义函数名-render
	3.定义函数参数-不需要
	4.确定返回值-不需要返回值
	5.写出函数
		1）写出函数壳子
			const render = function(){
			
			}
		2）放入功能代码
			const render = function(){
				1) 获取本地搜索记录
				2) 遍历记录拼成html标签
				3) 将拼接好的标签放入ul
			}
		3）替换参数变量
			const render = function(a, b, c){
				1) 获取本地搜索记录a
				2) 遍历记录拼成html标签b
				3) 将拼接好的标签放入ul
			}
	6.调用测试--render()
	7.优化细节