移动端常见特效和本地存储

2021-03-13 22:42:16 星期六

1. 移动端常见特效

click移动端300s延时解决方案

原因：移动端双击屏幕会缩放

1. 禁用缩放

<meta name="viewport" content="user-scalable=no" />

2. 利用touch事件自己封装这个事件 解决300ms延迟

原理：

（1）当我们手指触摸屏幕，记录当前触摸时间；
（2）当我们手指离开屏幕， 用离开的时间减去触摸的时间；
（3）如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击

3. 使用插件（js文件）

fastclick 插件解决300ms 延迟（引入fastclick.js文件）

事件触发时间：touchstart > touchend > click

2. 移动端常用开发插件

GitHub官网地址：https://github.com/ftlabs/fastclick

2.1 Swiper插件

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

2.2 其他移动端常见插件

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

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

3. 移动端常用框架

Bootstrap JS插件使用步骤

（1）引入相关 js文件

（2）复制HTML 结构

（3）修改对应样式

（4）修改相应JS 参数

4. 本地存储

4.1 特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage 约5M、localStorage 约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

4.2.window.sessionStorage

1、生命周期为关闭浏览器页面

2、在同一个页面下数据可以共享

3、以键值对的形式存储使用

存储数据

sessionStorage.setItem(key, value)

获得数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

清空数据

sessionStorage.clear()

4.3 window.localStorage

1. 声明周期永久生效，除非手动删除 否则关闭页面也会存在

2. 可以多页面共享（同一浏览器页面可以共享）

3. 以键值对的形式存储使用

存储数据

localStorage.setItem(key, value)

获得数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

清空数据

localStorage.clear()