2. swiper 插件
插件 就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果
推荐一款比较好用的 Swiper 插件 ，网址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
下面分享一下学习插件的大致过程，当然每个人的学习方式及不同，仅供参考：
-
熟悉官网，了解这个插件能够完成什么需求 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
-
看在线演示，找到符合自己需求的 demo Swiper演示 - Swiper中文网
-
查看基本使用流程 Swiper使用方法 - Swiper中文网
-
查看 API 文档，去配置自己的插件 中文api - Swiper中文网
需要注意的是：多个 Swiper 同时使用时，需要注意区分类名
下载本地使用：
（1）首先 加载插件 ：将下载的文件解压，然后新建文件夹，将相应的文件放进去
（2）复制代码
在演示界面中，任选一个 demo ，选择 在新窗口打开 ：
右键选择 查看页面源码 ：
复制样式：
<style>
html,
body {
position: relative;
height: 100%;
}
.box {
width: 600px;
height: 350px;
margin: 100px auto;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
复制结构：
<body>
<div class="box">
<!-- swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="./js/swiper-bundle.min.js"></script>
</body>
复制 JS 代码：
<script src="./js/swiper-bundle.min.js"></script>
<!-- JS 代码放在插件的下面 -->
<script>
var swiper = new Swiper('.mySwiper', {
slidesPerView: 1,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
})
</script>
效果预览：
在基础样式上，可以根据自己的需要修改样式、更换图片等
同一个 demo ，多次引用时，注意类名区分：
3. 本地存储 localStorage
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5 规范提出了相关的解决方案。
本地存储特性：
- 数据存储在用户浏览器中；
- 设置、读取方便，页面刷新时不丢失数据；
- 容量较大，sessionStorage 和 localStorage 约 5M 左右
特征：
- 生命周期永久生效，除非手动删除，否则关闭页面也会存在；
- 可以多窗口（页面）共享，前提是在同一浏览器；
- 以键值对的形式存储使用
示例：多个页面可以共享本地存储的数据，再重新打开另外一个页面：
删除本地存储，可以用代码删除，也可以直接手动删除：
代码删除：
<script>
localStorage.removeItem('username')
</script>
手动删除：
本地只能存储字符串，无法存储复杂数据类型，复杂数据类型 需要转换成 JSON 字符串，再存储到本地，可以使用 JSON.stringify(复杂数据类型) ，取出时使用 JSON.parse(JSON字符串) ，将 JSON 字符串转换成对象
JSON 属性和值都是双引号进行包含的：
<script>
let obj = {
name: '灵犀',
age: 24,
gander: '女'
}
console.log(JSON.stringify(obj))
</script>
复杂数据存储：
<script>
let obj = {
name: '灵犀',
age: 24,
gander: '女'
}
localStorage.setItem('uname', JSON.stringify(obj))
</script>
复杂数据获取:
<script>
let obj = {
name: '灵犀',
age: 24,
gander: '女'
}
localStorage.setItem('uname', JSON.stringify(obj))
// 直接打印
console.log(localStorage.getItem('uname'))
// 转换成对象
console.log(JSON.parse(localStorage.getItem('uname')))
</script>
