HTML5的存储技术
一、input标签type的新属性值
input标签是表单中的输入项,页面上使用频率也非常的高,在HTML5中针对input标签的type属性,增加新的属性值。
<!-- HTML5中input标签的type的新属性值 -->
<form action="#" method="post">
<p>姓名:<input type="text"></p>
<p>年龄:<input type="number"></p>
<p>生日:<input type="date"></p>
<p>邮箱:<input type="email"></p>
<p>搜索:<input type="search"></p>
</form>
type=“number” : 文本框中只能输入数字
type=“date” :页面上会展示日期选择器
type=“email” : 邮箱输入框,在提交表单的会简单的进行邮箱格式验证
type=“search” :普通的搜索框,在输入内容之后 ,文本框中会显示删除的小x符号
二、自定义属性
在HTML5之前,可以给标签书写任意的自定义属性,但由于自定义属性和标签自有属性并没有明显的区分,不利于维护和阅读,在HTML5中新增按照一定格式书写自定义属性。
1、HTML5之前自定义属性和js操作
<!-- HTML5之前的自定义属性 -->
<div title="提示信息" myname="张无忌" myage="23">好好学习,天天向上</div>
<script>
/**
* html5之前在标签上书写的自定义属性,
* 使用js操作的时候可以通过
* setAttribute:设置属性
* getAttribute:获取属性
* removeAttribute:移除属性
*/
let div = document.querySelector("div");
console.log( div.getAttribute("myname") );
// 修改属性
div.setAttribute("myage" , "18");
</script>
2、HTML5自定义属性和js操作
<!-- HTML5自定义属性 -->
<h1 data-name="灭绝师太">好好学习,天天向上</好>
<script>
/**
* 使用js操作:
* dataset["属性名"] 操作属性
*/
let h1 = document.querySelector("h1");
// 添加属性
h1.dataset["age"] = 88;
console.log(h1.dataset["name"]);
</script>
自定义属性的作用:
1.设置: dom.dataset[‘xxx’]=值;xxx用小写
2.获取: dom.dataset[‘xxxx’];
3.作用: 传递参数。
3、自定义属性练习
需求:每个li标签都有自定义属性为背景颜色,点击不同的li标签,改变li的背景颜色
<!--
需求:每个li标签都有自定义属性为背景颜色,点击不同的li标签,改变li的背景颜色
-->
<ul>
<li data-bg="red">红色</li>
<li data-bg="blue">蓝色</li>
<li data-bg="yellow">黄色</li>
<li data-bg="green">绿色</li>
<li data-bg="pink">粉色</li>
</ul>
<script>
// 获取页面li
let li = document.querySelectorAll("li");
// 遍历每个li,绑定鼠标点击事件
li.forEach(function(v){
v.addEventListener("click",function(){
this.style.backgroundColor=this.dataset["bg"];
})
})
</script>
三、web存储
1、web存储介绍
随着Web应用的发展,数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。
客户端(浏览器)存储的用途也越来越多,最经典的就是“记住用户名”,实现客户端存储的方式有很多种,比如cookie(通用),flash(插件),userData(ie),globalStroage(firefox)。
所以HTML5出现之前,兼容性最好的是cookie存储,但是cookie存储容量有限,而且安全性并不高。
HTML5的Web存储提供两种客户端存储技术:
sessionStorage 会话存储
localStrorage 本地存储
浏览器的web存储打开方式:
第一步:打开浏览器,按F12,打开浏览器控制台
第二步:选择application(应用)
第三部:左边菜单选择Storage,即可看到sessionStorage和localStorage
2、sessionStorage 会话级存储
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,并且当会话结束后数据也随之销毁。
会话:是指打开网页的那一刻至到网页被关闭,在这期间称为一个会话。
sessionStorage对象常用方法:
setItem(key,value) 将指定的key和value(键值对数据)存储到sessionStorage中
getItem(key) 通过key获取数据
removeItem(key) 通过key删除数据
clear 清除所有数据
2.1、存储数据
说明:页面有上5个不同的按钮,点击不同按钮,实现操作sessionStorage中的数据
<button id="btn1">添加数据</button>
<button id="btn2">获取数据</button>
<button id="btn3">修改数据</button>
<button id="btn4">删除数据</button>
<button id="btn5">清空数据</button>
<script>
// 存储数据
let btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
sessionStorage.setItem("name","张无忌");
sessionStorage.setItem("age","23");
sessionStorage.setItem("addr","光明顶");
}
</script>
2.2、获取数据
// 获取数据
let btn2 = document.querySelector("#btn2");
btn2.addEventListener("click",function(){
// 获取存在的数据
let name = sessionStorage.getItem("name");
console.log(name);
// 获取不存在key
let sex = sessionStorage.getItem("sex");
console.log(sex);
})
将浏览器调试界面切换到console下,查阅输出的数据:
注意 当前获取sessionStorage中不存在的属性数据时会返回 null
2.3、修改数据
// 修改数据
let btn3 = document.querySelector("#btn3");
btn3.addEventListener("click" , function(){
sessionStorage.setItem("name","灭绝师太");
})
注意 当使用setItem操作sessionStorage的时候,如果指定的key不存在,是给sessionStorage中添加数据,如果指定的key存在,那就是修改key对应的value值。key值无法修改
2.4、删除数据
// 删除数据
let btn4 = document.querySelector("#btn4");
btn4.addEventListener("click" , function(){
sessionStorage.removeItem("age");
})
注意 只能根据指定的key删除对应的这一对数据,不能通过value删除数据
2.5、清空数据
// 清空数据
let btn5 = document.querySelector("#btn5");
btn5.addEventListener("click" , function(){
sessionStorage.clear();
})
注意 clear会将sessionStorage中的所有数据全部清空,使用需谨慎,不要随意清空sessionStorage中的所有数据
2.6、生命周期
所谓生命周期:一个事物从它开始存在算起,一直到其灭亡,即就是这个事物的一个完整生命周期。
sessionStorage的生命周期:从浏览器打开到浏览器的窗口关闭,一般用存储临时数据。
3、localStorage 本地存储
localStorage对象的方法与sessionStorage方法完全相同,使用也完全一样
localStorage 对象常用方法:
setItem(key,value) 将指定的key和value(键值对数据)存储到localStorage 中
getItem(key) 通过key获取数据
removeItem(key) 通过key删除数据
clear 清除所有数据
<body>
<button id="btn1">添加数据</button>
<button id="btn2">获取数据</button>
<button id="btn3">修改数据</button>
<button id="btn4">删除数据</button>
<button id="btn5">清空数据</button>
<script>
// 存储数据
let btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
localStorage.setItem("name","张无忌");
localStorage.setItem("age","23");
localStorage.setItem("addr","光明顶");
}
// 获取数据
let btn2 = document.querySelector("#btn2");
btn2.addEventListener("click",function(){
// 获取存在的数据
let name = localStorage.getItem("name");
console.log(name);
// 获取不存在key
let sex = localStorage.getItem("sex");
console.log(sex);
})
// 修改数据
let btn3 = document.querySelector("#btn3");
btn3.addEventListener("click" , function(){
localStorage.setItem("name","灭绝师太");
})
// 删除数据
let btn4 = document.querySelector("#btn4");
btn4.addEventListener("click" , function(){
localStorage.removeItem("age");
})
// 清空数据
let btn5 = document.querySelector("#btn5");
btn5.addEventListener("click" , function(){
localStorage.clear();
})
</script>
</body>
注意 :localStorage:永久保存,除非人为删除
4、会话存储和本地存储的区别
1.生命周期不同。会话存储是从浏览器窗口关闭就结束了。本地存储是永久保存。
2.存储位置不同。
5、web存储练习(两个页面之间传递数据)
需求:A页面上有三个商品信息,点击任何一个商品,跳转到B页面,在B页面上显示A页面被点击的商品的编号(商品ID)信息。
分析:需要注意两种情况:
假设A页面和B页面都在相同页签打开,这时可以直接使用sessionStorage作为存储数据的介质,在点击A页面上任意商品时,首先将商品编号信息存储在sessionStorage中,然后通过js打开B页面,B页面从sessionStorage中获取商品编号信息,并展示在页面上
假设A页面和B页面在不同的页签打开,这时无法使用sessionStorage进行数据共享,只能使用localStorage完成数据共享,操作与上述方法相同。
这里演示使用sessionStorage完成两个页面之间数据传递
A页面内容
<body>
<!--
页面上的每个img标签使用自定义属性,设置每个商品的编号
-->
<div class="box">
<img src="./imgs/1.jpg" data-good-id="10001">
<img src="./imgs/2.jpg" data-good-id="10002">
<img src="./imgs/3.jpg" data-good-id="10003">
</div>
<script>
// 获取页面每个img,给其添加点击事件
let imgs = document.querySelectorAll("img");
imgs.forEach(function( v ){
v.addEventListener("click",function(){
console.log(v);
// 获取当前点击的商品的编号
let goodId = v.dataset["goodId"];
// 将商品编号放到sessionStorage中
sessionStorage.setItem("goodId",goodId);
// 打开B页面
location.href="./06-web存储练习B页面.html";
})
});
</script>
</body>
B页面内容
<body>
商品编号是:<span></span>
<script>
// 从sessionStorage中获取商品编号
let goodId = sessionStorage.getItem("goodId");
// 判断是否拿到商品id
if(goodId){
// 判断成立,说明拿到商品编号,放到页面上
document.querySelector("span").textContent = goodId;
}else{
// 判断不成立,说明没有从sessionStorage中获取到key为goodId对应的数据
alert("没有任何商品编号");
// 踢回到商品列表页面
location.href = "05-web存储练习A页面.html";
}
</script>
</body>
四、JSON两个核心方法
1、JSON.parse() 方法
JSON.parse(str) 将字符串转成对象
// 自定义字符串数据
let sData = '{"name":"灭绝师太","age":23,"addr":"峨眉山","sex":"女"}';
console.log(sData);
// 将字符串格式对象转成js对象
let objs = JSON.parse(sData);
console.log(objs);
2、JSON.stringify(obj)
JSON.stringify(obj) 将对象转成字符串
// 定义对象
let person = {
"name":"灭绝师太",
"age":23,
"addr":"峨眉山",
"sex":"女"
};
// 输出对象
console.log(person);
// 将对象转成字符串
let sPerson = JSON.stringify( person );
// 输出转后的数据
console.log(sPerson);
五、综合实战
需求:模拟京东的app的搜索历史记录
1、页面html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/08.css">
</head>
<body>
<!-- 页面顶部搜索区域 -->
<header class="top">
<span class="back"><</span>
<div class="top-search">
<input class="kw" type="text" placeholder="请输入搜索商品名称">
<span class="search-icon"></span>
</div>
<button class="search-btn">搜索</button>
</header>
<!-- 页面显示搜索历史记录区域 -->
<div class="search-history">
<div class="history-top">
<p class="history-title">最近搜索</p>
<span class="history-delete-icon"></span>
</div>
<div class="history-content">
</div>
</div>
<script src="./js/08.js"></script>
</body>
</html>
2、页面css代码
@charset "utf-8";
/* 清除标签默认样式 */
body,input,h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
}
/* 设置顶部搜索区域样式 */
.top{
height: 60px;
padding: 5px 10px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.top .back{
font-size: 36px;
color: #999;
}
.top .top-search{
line-height: 50px;
width: 100%;
margin: 0 10px;
position: relative;
}
.top .kw{
padding: 0 40px;
box-sizing: border-box;
width: 100%;
height: 30px;
border-radius: 25px;
border: 0;
outline: 0;
background-color: #f7f7f7;
}
.top .search-icon{
width: 28px;
height: 28px;
position: absolute;
top: 16px;
left: 10px;
background-image: url(../imgs/search-icon.png);
background-repeat: no-repeat;
background-size: 70% ;
}
.top .search-btn{
width: 70px;
height: 30px;
background-color: #e93b3d;
color: #fff;
border-radius: 5px;
border: 0;
outline: 0;
}
/* 设置页面显示搜索历史记录区域样式 */
.search-history{
padding: 10px;
}
.history-top{
display: flex;
justify-content: space-between;
}
.history-delete-icon{
width: 28px;
height: 28px;
background-image: url(../imgs/delete.png);
background-repeat: no-repeat;
background-size: 70% ;
}
.history-content a{
color: #686868;
display: inline-block;
padding: 5px 10px;
background-color: #f0f2f5;
text-decoration: none;
font-size: 12px;
border-radius: 4px;
margin: 2px 3px;
}
3、页面js代码
// 获取页面上的搜索按钮
let searchBtn = document.querySelector(".search-btn");
// 给搜索按钮添加点击事件
searchBtn.addEventListener("click", function () {
// 点击按钮之后,需要获取到输入框中输入的商品关键词
let kw = document.querySelector(".kw").value;
if (!kw) {
// 判断成立,说明没有输入任何商品关键词,这时需要提示输入信息
alert("请输入搜索商品名称");
return;
}
addHistoryToLocalStorage( kw );
})
// 将搜索记录添加到localStorage中
function addHistoryToLocalStorage( kw ) {
// 需要先判断localStorage中是否已经存在搜索记录,
// 如果有,就是给其中追加数据,如果没有就是添加新数据
let searchKey = localStorage.getItem("searchKey");
// 判断localStorage中是否存在搜索的历史记录数据
if (searchKey) {
// 判断成立,说明localStorage中有搜索历史记录
// 需要先取出已有的数据,然后追加新的数据
let searchDatas = JSON.parse(searchKey);
// 将数据追加到数组中
searchDatas.push(kw);
// 数据重新放回localStorage中
localStorage.setItem("searchKey", JSON.stringify( searchDatas ));
} else {
let searchDatas = [kw];
// 判断不成立,执行else,说明localStorage中没有搜索历史记录
localStorage.setItem("searchKey", JSON.stringify( searchDatas ));
}
location.reload();
}
// 显示历史记录
function showHistoryInfo() {
// 从localStorage中获取已经存在的历史记录信息
let searchKey = localStorage.getItem("searchKey");
// 判断localStorage中是否存在搜索的历史记录数据
if ( searchKey ) {
// 判断成立,说明存在搜索的历史记录数据
// 需要将数据转成js对象
let searchData = JSON.parse(searchKey).reverse();
// 遍历数组,需要拼接给页面添加的数据
let a = "";
searchData.forEach(function ( v ) {
a += `<a href="#">${
v}</a>`
})
// 添加到页面上
document.querySelector(".history-content").innerHTML = a;
}
}
// 保证页面加载完成,就能够显示数据
showHistoryInfo();
// 清除历史记录
function deleteHistoryInfo() {
// 获取清除历史记录按钮
let historyDeleteIcon = document.querySelector(".history-delete-icon");
// 绑定点击事件
historyDeleteIcon.addEventListener("click", function () {
// 需要清除两部分内容:
// 1、清除localStorage中的数据
localStorage.removeItem("searchKey");
// 2、刷新页面
location.reload();
})
}
// 页面加载完成,需要给删除按钮绑定事件
deleteHistoryInfo();