1.本地存储
我们已经讨论过 静态网站（static sites） 和动态网站（ dynamic sites）的区别。 大多数现代的web站点是动态的— 它们在服务端使用各种类型的数据库来存储数据(服务端存储), 之后通过运行服务端（ server-side） 代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出HTML渲染到用户浏览上。
客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript APIs 组成的因此允许你在客户端存储数据 (比如在用户的机器上)，而且可以在需要的时候重新取得需要的数据。这有很多明显的用处，比如：
- 个性化网站偏好（比如显示一个用户选择的窗口小部件，颜色主题，或者字体）。
- 保存之前的站点行为 (比如从先前的session中获取购物车中的内容， 记住用户是否之前已经登陆过)。
- 本地化保存数据和静态资源可以使一个站点更快（至少让资源变少）的下载， 甚至可以在网络失去链接的时候变得暂时可用。
- 保存web已经生产的文档可以在离线状态下访问。
基本语法
localSorage:
甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用。
设置： localStorage.setItem('name','鲁班');
获取：localStorage.getItem("name");
移除某一项：localStorage.removeItem('name');
移除所有: localStorage.clear()
//设置
// localStorage.setItem('name','鲁班');
// localStorage.setItem('age',20);
//保存复杂数据类型
let info = {
name:"鲁班",
age:20
}
let strInfo = JSON.stringify(info);
localStorage.setItem('info',strInfo);
//清除缓存项
// localStorage.removeItem('name');
//使用
let oldInfo = localStorage.getItem('info');
let getInfo = JSON.parse(oldInfo);
console.log(getInfo);
sessionStorage:
只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，
设置： sessionStorage.setItem('name','鲁班');
获取：sessionStorage.getItem("name");
移除某一项：sessionStorage.removeItem('name');
移除所有: sessionStorage.clear()
sessionStorage.setItem("name",'鲁班');
console.log(sessionStorage.getItem("name"));
购物车案例:
index.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>
<style>
table{
border-collapse:collapse;
width: 750px;
margin: 100px auto;
}
th,td{
border: 1px solid black;
width: 150px;
height: 50px;
text-align: center;
}
td img{
width: 70%;
}
.link{
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<table class="tables">
<tr><th>商品id</th><th>商品图片</th><th>商品名称</th><th>商品价格</th><th>操作</th></tr>
</table>
<button class="link">点击查看购物车</button>
</body>
</html>
<script>
let obj = [
{
id:'001',
imgSrc:'./img/1.jpg',
price:'20',
count:1,
name:'鲁班皮肤'
},
{
id:'002',
imgSrc:'./img/2.jpg',
price:'20',
count:1,
name:'亚瑟皮肤'
},
{
id:'003',
imgSrc:'./img/3.jpg',
price:'20',
count:1,
name:'程咬金皮肤'
},
{
id:'004',
imgSrc:'./img/4.jpg',
price:'20',
count:1,
name:'凯皮肤'
},
{
id:'005',
imgSrc:'./img/5.jpg',
price:'20',
count:1,
name:'荆轲皮肤'
}
]
let tables = document.querySelector(".tables");
let flag = document.createDocumentFragment();
let link = document.querySelector(".link");
for(let i = 0;i<obj.length;i++){
let tr = document.createElement("tr");
tr.innerHTML = "<td>"+obj[i].id+"</td><td><img src='"+obj[i].imgSrc+"'></td><td>"+obj[i].name+"</td><td>"+obj[i].price+"</td><td><button class='add'>添加</button></td>"
flag.append(tr);
}
tables.append(flag);
//获取所有的按钮
let btns = document.querySelectorAll(".add");
//添加点击事件
for(let i = 0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
let storageArr = JSON.parse(localStorage.getItem('shop')) || [];
let item = obj[i];
let isRepeat = true;
//判断重复的问题
storageArr.forEach(function(v,index){
if(item.id == v.id){
++v.count;
isRepeat = false;
}
});
if(isRepeat){
storageArr.push(item);
}
//保存到缓存中
localStorage.setItem('shop', JSON.stringify(storageArr));
alert("添加购物车成功");
})
}
//点击查看购物车
link.addEventListener('click',function(){
location.href = "content.html";
});
</script>
content.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>
<style>
table{
border-collapse:collapse;
width: 750px;
margin: 100px auto;
}
th,td{
border: 1px solid black;
width: 150px;
height: 50px;
text-align: center;
}
td img{
width: 70%;
}
.link{
display: block;
margin: 20px auto;
}
.title{
font-size: 30px;
font-weight: bold;
padding: 15px 0;
}
</style>
</head>
<body>
<table class="tables">
<caption class="title">购物车列表</caption>
<tr><th>商品id</th><th>商品图片</th><th>商品名称</th><th>商品价格</th><th>数量</th></tr>
</table>
</body>
</html>
<script>
window.addEventListener('load',function(){
//获取缓存中的数据
let tables = document.querySelector(".tables");
let flag = document.createDocumentFragment();
let obj = localStorage.getItem("shop") || [];
obj = JSON.parse(obj);
//没有数据项处理
if(obj.length === 0){
let tr = document.createElement("tr");
tr.innerHTML = "<td colspan = '5'>购物车为空</td>";
tables.append(tr);
return;
}
for(let i = 0;i<obj.length;i++){
let tr = document.createElement("tr");
tr.innerHTML = "<td>"+obj[i].id+"</td><td><img src='"+obj[i].imgSrc+"'></td><td>"+obj[i].name+"</td><td>"+obj[i].price+"</td><td>"+obj[i].count+"</td>"
flag.append(tr);
}
tables.append(flag);
})
</script>
2.视频播放
很多站点都会使用到视频. HTML5 提供了展示视频的标准。
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
支持的浏览器器：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.
//我们之前学习html5标签的时候，只能显示一个浏览器默认的controls 那么我们在js阶段就需要
<video id="video1" width="420" controls>
<source src="./video/1.mp4" type="video/mp4">
<source src="./video/1.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
案例1：
使用js控制的视频
let play = document.querySelector(".play");
let video = document.querySelector("#video1");
play.addEventListener('click',function(){
if(video.paused){
video.play();
}else{
video.pause();
}
})
案例2:
网页播放器
<!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>
<style>
*{
margin: 0;
padding: 0;
}
/* 去掉全屏时显示的自带控制条 */
video::-webkit-media-controls{
display:none !important;
}
.vidioWrap{
width: 640px;
height: 480px;
margin: 100px auto;
}
.loading{
width: 100%;
height: 100%;
display: block;
}
.loading img{
width: 100%;
}
.title{
font-size: 30px;
font-weight: bold;
padding: 10px 0;
text-align: center;
}
.content{
width: 100%;
height: 100%;
display: none;
position: relative;
background: black;
overflow: hidden;
}
.content:hover .selectTabs{
bottom: 0;
}
#video{
width: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.selectTabs{
width: 100%;
height: 40px;
background: orange;
position: absolute;
bottom: -40px;
left: 0;
display: flex;
align-items: center;
transition: bottom .5s;
}
.unit{
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.unit img{
width: 50%;
}
.pogress{
flex: 1;
height: 5px;
border-radius: 10px;
border: 1px solid white;
overflow: hidden;
}
.pogress .move{
width: 0;
height: 100%;
background: white;
}
.time{
font-size: 14px;
color: white;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="vidioWrap">
<p class="title">一段唯美的视频</p>
<div class="loading">
<img src="./img/load.gif">
</div>
<div class="content">
<video id="video">
<source src="./video/1.mp4" type="video/mp4">
<source src="./video/1.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<div class="selectTabs">
<div class="play unit">
<img src="./img/pause.png">
</div>
<div class="pogress">
<div class="move"></div>
</div>
<div class="time">
<span class="runTime">00:00:00</span>/<span class="fixedTime">00:00:00</span>
</div>
<div class="voice unit">
<img src="./img/voice.png">
</div>
<div class="Fullscreen unit">
<img src="./img/fullScreen.png">
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let content = document.querySelector(".content");
let video = content.querySelector("#video");
let loading = document.querySelector(".loading");
let fixedTime = document.querySelector(".fixedTime");
let play = document.querySelector(".play");
let runTime = document.querySelector(".runTime");
let move = document.querySelector(".move");
let Fullscreen = document.querySelector(".Fullscreen");
let pogress = document.querySelector(".pogress");
let voice = document.querySelector(".voice");
play.addEventListener('click',function(){
if(video.paused){
video.play();
this.children[0].setAttribute('src', './img/play.png');
}else{
video.pause();
this.children[0].setAttribute('src', './img/pause.png');
}
})
//等到浏览器允许播放视频
video.oncanplay = function(){
content.style.display = "block";
loading.style.display = "none";
let totalTime = formatTime(video.duration);
fixedTime.innerHTML = totalTime;
}
//监听时间变化(计算滚动条的距离)
video.ontimeupdate = function(){
//获取当前播放的时间
let cureentTime = video.current;
let precent = video.currentTime/video.duration *100+"%";
move.style.width = precent;
//显示当前的播放时间
let currentPlay = formatTime(video.currentTime);
runTime.innerHTML = currentPlay;
}
//监听视频是否结束
video.onended = function(){
video.pause();
play.children[0].setAttribute('src', './img/pause.png');
video.currentTime = 0;
move.style.width = 0;
}
//让视频全屏
Fullscreen.addEventListener('click',function(){
if(this.classList.contains('actived')){
document.exitFullscreen();
this.classList.remove('actived');
this.children[0].setAttribute('src','./img/fullScreen.png');
}else{
content.requestFullscreen();
this.classList.add('actived');
this.children[0].setAttribute('src','./img/shrinkScreen.png');
}
})
//退出全屏ESC
let flag = false;
window.addEventListener('fullscreenchange',function(event){
flag = !flag;
if(!flag){
Fullscreen.classList.remove('actived');
Fullscreen.children[0].setAttribute('src','./img/fullScreen.png');
}
})
//点击视频快进
pogress.addEventListener('click',function(event){
//获取距离自身水平偏移值
let offsetleft = event.offsetX;
//获取当前点击对应的时间
let current = offsetleft/this.offsetWidth * video.duration;
video.currentTime = current;
})
//静音和启动音效开关
voice.addEventListener('click',function(){
if(video.muted){
video.muted = false;
this.children[0].setAttribute("src",'./img/voice.png');
}else{
video.muted = true;
this.children[0].setAttribute("src",'./img/closeVoice.png');
}
})
//时间格式化
function formatTime(time){
//计算小时数
let h = Math.floor(time / 3600);
h = h<10?"0"+h:h;
//计算分钟数
let m = Math.floor(time % 3600 / 60);
m = m<10?"0"+m:m;
//计算秒
let s = Math.floor(time % 60);
s = s<10?"0"+s:s;
return h+":"+m+":"+s;
}
、
