1-HTML5-web存储技术

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">&lt;</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();