WebAPI之移动端事件、常用的开发插件和本地存储

拼搏现实的明天。 2023-02-14 05:59 147阅读 0赞

### WebAPI之移动端事件、常用的开发插件和本地存储 ###

*  WebAPI之移动端事件、常用的开发插件和本地存储
 *   *  1. 触屏事件
     *   *  1.1 触屏事件概述
         *  1.2 触屏事件的对象
         *  1.3 移动端拖动元素
         *  1.4 classList 属性
     *  2 移动端常用的开发插件与框架
     *   *  2.1 Swiper 插件的使用
         *  2.2 superslide与iscroll插件
         *  2.3 移动端视频插件 zy.media.js
         *  2.4 click 延时解决方案（fastclick 插件）
     *  3 本地存储
     *   *  3.1 本地存储特性
         *  3.2 window.sessionStorage
         *  3.3 window.localStorage

# WebAPI之移动端事件、常用的开发插件和本地存储 #

## 1. 触屏事件 ##

### 1.1 触屏事件概述 ###

触屏事件：  
![在这里插入图片描述][20200601135414667.JPG_pic_center]使用代码如下：

### 1.2 触屏事件的对象 ###

常用的触摸事件对象如下：  
![在这里插入图片描述][20200601135809627.JPG_pic_center]  
用法如下：

### 1.3 移动端拖动元素 ###

**拖动元素三步曲：**

（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置

（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子

（3） 离开手指 touchend:  
\`注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

**实现代码如下：**

### 1.4 classList 属性 ###

classList属性是HTML5新增的一个属性，返回元素的类名。该属性用于在元素中添加，移除及切换 CSS 类。  
代码如下：

<div class="one two"></div>
        <button> 开关灯</button>
        <script> // classList 返回元素的类名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加类名 是在后面追加类名不会覆盖以前的类名 注意前面不需要加. div.classList.add('three'); // 2. 删除类名 div.classList.remove('one'); // 3. 切换类 var btn = document.querySelector('button'); btn.addEventListener('click', function() { document.body.classList.toggle('bg'); }) </script>

## 2 移动端常用的开发插件与框架 ##

它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

### 2.1 Swiper 插件的使用 ###

中文官网地址： https://www.swiper.com.cn/

1.  引入插件相关文件。
2.  按照规定语法使用

### 2.2 superslide与iscroll插件 ###

superslide： http://www.superslide2.com/

iscroll： https://github.com/cubiq/iscroll

### 2.3 移动端视频插件 zy.media.js ###

H5 给我们提供了 video 标签，但是浏览器的支持情况不同。

### 2.4 click 延时解决方案（fastclick 插件） ###

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。  
使用插件。fastclick 插件解决300ms 延迟。  
代码如下：

## 3 本地存储 ##

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

### 3.1 本地存储特性 ###

*  1.数据存储在用户浏览器中
 *  2.设置、读取方便、甚至页面刷新不丢失数据
 *  3.容量较大，sessionStorage约5M、localStorage约20M
 *  4.只能存储字符串，可以将对象JSON.stringify() 编码后存储

### 3.2 window.sessionStorage ###

*  1.生命周期为关闭浏览器窗口
 *  2.在同一个窗口(页面)下数据可以共享
 *  3.以键值对的形式存储使用

代码如下：

<input type="text">
        <button class="set">存储数据</button>
        <button class="get">获取数据</button>
        <button class="remove">删除数据</button>
        <button class="del">清空所有数据</button>
        <script> console.log(localStorage.getItem('username')); var ipt = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var del = document.querySelector('.del'); set.addEventListener('click', function() { // 当我们点击了之后，就可以把表单里面的值存储起来 var val = ipt.value; sessionStorage.setItem('uname', val); sessionStorage.setItem('pwd', val); }); get.addEventListener('click', function() { // 当我们点击了之后，就可以把表单里面的值获取过来 console.log(sessionStorage.getItem('uname')); }); remove.addEventListener('click', function() { // sessionStorage.removeItem('uname'); }); del.addEventListener('click', function() { // 当我们点击了之后，清除所有的 sessionStorage.clear(); }); </script>

### 3.3 window.localStorage ###

*  1.声明周期永久生效，除非手动删除 否则关闭页面也会存在
 *  2.可以多窗口（页面）共享（同一浏览器可以共享）
 *  3.以键值对的形式存储使用

代码如下：

<input type="text">
        <button class="set">存储数据</button>
        <button class="get">获取数据</button>
        <button class="remove">删除数据</button>
        <button class="del">清空所有数据</button>
        <script> var ipt = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var del = document.querySelector('.del'); set.addEventListener('click', function() { var val = ipt.value; localStorage.setItem('username', val); }) get.addEventListener('click', function() { console.log(localStorage.getItem('username')); }) remove.addEventListener('click', function() { localStorage.removeItem('username'); }) del.addEventListener('click', function() { localStorage.clear(); }) </script>

[20200601135414667.JPG_pic_center]: https://img-blog.csdnimg.cn/20200601135414667.JPG#pic_center
[20200601135809627.JPG_pic_center]: https://img-blog.csdnimg.cn/20200601135809627.JPG#pic_center