js本地存储-移动端生鲜页面

最新推荐文章于 2024-02-27 20:12:52 发布
最新推荐文章于 2024-02-27 20:12:52 发布
阅读量327 收藏
点赞数
分类专栏： 前端 文章标签： css html js css3 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43844838/article/details/107452632
版权

jQuery库使用

一、存储–服务器环境下

1. cookie

  1. cookie存储在本地，容量4k，在同源的http请求时携带传递，损耗带宽。最好的使用方法：设置访问的路径和设置过期时间

  2. 使用

    1. 设置cookie: $.cookie(‘mycookie’,‘ok’,{expires:7,path:’/’}) 在/目录下设置一个名为：mycookie值为ok的cookie，保存时间为7天
    2. 读取cookie： $.cookie(“mycookie”); //ok

  3. 查看cookie是否设置好了
    在这里插入图片描述

  4. 实例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cookie存储</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript">
		// 属性名 属性值 {expires:存储时间，path:存储路径}
		// 存cookie
		$.cookie('mycookie','ok',{expires:7,path:'/'})

		// 读取cookie
		var mycookie = $.cookie("mycookie");
		alert(mycookie);  // ok
	</script>
</head>
<body>
	<h1>测试页面</h1>
</body>
</html>

2.webstorage

  1. localStorage
    永久存储，存储在本地，容量是5M/更大，http请求中不携带，在所有同源窗口共享。

  2. sessionStorage
    本地存储，5M/更大，请求中不携带，在同源的当前窗口关闭后失效

  3. 实例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>存储文件</title>
	<script type="text/javascript">
		// 设置
		// 永久存储
		localStorage.setItem('dat','456');
		// localStorage.dat = '456';
		//获取
		alert(localStorage.dat);
		// 删除
		// localStorage.removeItem("dat");
		

		// 关闭浏览器后失效
		sessionStorage.setItem('dat2','789');

	</script>
</head>
<body>
	<h1>测试webstorage</h1>
</body>
</html>

    浏览器中查看：
    在这里插入图片描述

3. 一段时间弹出一次的弹窗

  1. 代码
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面弹窗</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript">
		$(function(){
			// 先看看有没有设置cookie
			var hasread = $.cookie('hasread');
			// alert(hasread);   // 没有就是undefined
			
			// 判断是否存储了cookie,没有就弹出弹框
			if (hasread == undefined){
				// alert("没有cookie");
				$(".pop_con").show();
				// 用户点击知道后 存储cookie 把弹框关掉
				$('#userread').click(function(){
					$.cookie('hasread','read',{expires:7,path:'/'});
					$('.pop_con').hide();
				});
				$('#close').click(function(){
					$('.pop_con').hide();
				});

			}
		});
	</script>
	<style type="text/css">
		.pop{
			/*弹框*/
			position: fixed;
			width:500px;
			height: 300px;
			background-color: #fff;
			border:3px solid #000;
			left:50%;
			top:50%;
			margin-left:-250px;
			margin-top: -150px;
			z-index:9999;

		}

		.mask{
			/*弹框背景*/
			position: fixed;
			width: 100%;
			height:100%;
			background-color: #000;
			opacity: 0.3;
			/*兼容IE*/
			filter:alpha(opacity=30);
			left:0;
			top:0;
			z-index:9998;
		}
		.pop_con{
			/*默认为隐藏*/
			display: none;
		}
		.close{
			float: right;
			font-size: 30px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="pop_con">
		<div class="pop">
			亲！本网站最近有优惠活动！请关注！
			<a href="#" id="close" class="close">×</a>
			<a href="javascript:;" id="userread">朕晓得了</a>
		</div>
		<!-- 弹窗后的背景 -->
		<div class="mask"></div>
	</div>
	<h2>网站内容</h2>
</body>
</html>
    效果：
    当点击知道了之后会储存一个cookie储存7天，7天之内放问这个页面弹窗不会出现在这里插入图片描述
    存储的cookie
    在这里插入图片描述

二、移动端幻灯片及整体制作

  1. 使用swiper.jquery.min.js

  2. 幻灯片的结构要是这种的

    <div class="swiper-container">
				<div class="swiper-wrapper">
					<!-- 幻灯片 -->
				    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
				    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
			        <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>  
			    </div>    
				    <div class="swiper-pagination"></div>  
				    <!-- 没有箭头就注释掉下面的   -->
				    <div class="swiper-button-prev"></div>    
				    <div class="swiper-button-next"></div>
			</div>
    1. 即：
      1. 幻灯片的整个结构要用swiper-container类样式包起来
      2. 照片的部分要用swiper-wrapper这个包起来，每张照片要用swiper-slide包起来
      3. 左右箭头分贝用：swiper-button-prev和swiper-button-next的类样式
      4. 底部的小圆点用：swiper-pagination样式
    2. js控制代码
    			// 实例化一个类对象
			// 前四个字符串对应的容器名 以及 小圆点 左右箭头
			var swiper = new Swiper('.swiper-container', {
			    pagination: '.swiper-pagination',
			    prevButton: '.swiper-button-prev',  
			    nextButton: '.swiper-button-next',    
			    initialSlide :0,  // 初始幻灯片 0开始
			    paginationClickable: true,  // 小圆点是否可以点
			    loop: true,  // 首尾相连的循环  ， 如果是false 他就从左边回去了
			    autoplay:3000,  // 设置多长时间间隔播放一张
			    // 用户操作后是否自动播放，false：自动播放,true:操作后不播放
			    autoplayDisableOnInteraction:true
			});

  3. 整体代码的实现：
    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!-- 要放在main的上面 -->
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/set_root.js"></script>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 实例化一个类对象
			// 前四个字符串对应的容器名 以及 小圆点 左右箭头
			var swiper = new Swiper('.swiper-container', {
			    pagination: '.swiper-pagination',
			    prevButton: '.swiper-button-prev',  
			    nextButton: '.swiper-button-next',    
			    initialSlide :0,  // 初始幻灯片 0开始
			    paginationClickable: true,  // 小圆点是否可以点
			    loop: true,  // 首尾相连的循环  ， 如果是false 他就从左边回去了
			    autoplay:3000,  // 设置多长时间间隔播放一张
			    // 用户操作后是否自动播放，false：自动播放,true:操作后不播放
			    autoplayDisableOnInteraction:true
			}); 
		});
	</script>
	<title>天天生鲜---移动端</title>
</head>
<body>
	<div class="main_wrap">

		<!-- 头部 -->
		<div class="header clearfix">
			<a href="#" class="logo">
				<img src="images/logo.png" alt="logo">
			</a>
			<a href="#" class="search"></a>
		</div>
		

		<!-- 中间 -->
		<div class="center_con">
			<!-- 幻灯片 + 小圆点(自动可以生成) -->
			<div class="slide">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<!-- 幻灯片 -->
					    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
					    <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
				        <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>  
				    </div>    
					    <div class="swiper-pagination"></div>  
					    <!-- 没有箭头就注释掉下面的   -->
					    <div class="swiper-button-prev"></div>    
					    <div class="swiper-button-next"></div>
				</div>
				<!-- <img src="images/slide.jpg" alt="幻灯片"> -->
			</div>
			

			<!-- 菜单 -->
			<!-- .menu_con>ul.menu>(li>a+h3{水果})*8 -->
			<div class="menu_con clearfix">
				<ul class="menu">
					<li>
						<a href="#"></a>
						<h2>水果</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>海鲜</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>肉类</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>禽蛋</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>蔬菜</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>速冻</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>热卖</h2>
					</li>
					<li>
						<a href="#"></a>
						<h2>新品</h2>
					</li>
				</ul>
			</div>
			

			<!-- 公共模块 -- 展示 -->
			<div class="common_model clearfix">
				<div class="common_title">
					<h3>新鲜水果</h3>
					<a href="#">更多 &gt;</a>
				</div>
				<a href="#" class="banner">
					<img src="images/banner.jpg" alt="banner">
				</a>
				<ul class="goods_list">
					<li>
						<a href="#" class="goods_link">
							<img src="images/goods019.jpg" alt="商品">
						</a>
						<h4>新西兰皇家草莓</h4>
						<p class="unit">1kg/提</p>
						<p class="price">￥30.00</p>
						<a href="#" class="add_chart"></a>
					</li>

					<li>
						<a href="#" class="goods_link">
							<img src="images/goods019.jpg" alt="商品">
						</a>
						<h4>新西兰皇家草莓</h4>
						<p class="unit">1kg/提</p>
						<p class="price">￥30.00</p>
						<a href="#" class="add_chart"></a>
					</li>

					<li>
						<a href="#" class="goods_link">
							<img src="images/goods019.jpg" alt="商品">
						</a>
						<h4>新西兰皇家草莓</h4>
						<p class="unit">kg/提</p>
						<p class="price">￥30.00</p>
						<a href="#" class="add_chart"></a>
					</li>
				</ul>
			</div>


			<div class="common_model clearfix">
				<div class="common_title">
					<h3>新鲜水果</h3>
					<a href="#">更多 &gt;</a>
				</div>
				<a href="#" class="banner">
					<img src="images/banner.jpg" alt="banner">
				</a>
				<ul class="goods_list">
					<li>
						<a href="#" class="goods_link">
							<img src="images/goods019.jpg" alt="商品">
						</a>
						<h4>新西兰皇家草莓</h4>
						<p class="unit">1kg/提</p>
						<p class="price">￥30.00</p>
						<a href="#" class="add_chart"></a>
					</li>

					<li>
						<a href="#" class="goods_link">
							<img src="images/goods019.jpg" alt="商品">
						</a>
						<h4>新西兰皇家草莓</h4>
						<p class="unit">1kg/提</p>
						<p class="price">￥30.00</p>
						<a href="#" class="add_chart"></a>
					</li>

					<li>
						<a href="#" class="goods_link">
							<img src="images/goods019.jpg" alt="商品">
						</a>
						<h4>新西兰皇家草莓</h4>
						<p class="unit">kg/提</p>
						<p class="price">￥30.00</p>
						<a href="#" class="add_chart"></a>
					</li>
				</ul>
			</div>



		</div>
		

		<!-- 尾部 -->
			<ul class="footer">
				<li>
					<a href="#"></a>
					<h2>首页</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>分类</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>购物车</h2>
				</li>
				<li>
					<a href="#"></a>
					<h2>我的</h2>
				</li>
			</ul>

	</div>
	
</body>
</html>

    reset.css

    
/* 将有格式的标签清除格式 */

/* 将标签默认的间距设为0 */
body, p, h1, h2, h3, h4, h5, h6, ul, dl, dt,form, input{
	margin: 0px;
	padding: 0px;
}


/* 
	清除ul的小圆点  ol也有，如果用就加 
*/
ul{
	list-style: none;
}


/* 去掉默认的下划线 */
a{
	text-decoration: none;
}


/* 去掉倾斜 */
em{
	font-style: normal;
}


/* 
	在ie中图片做链接会有一个默认的边框  去掉它
*/
img{
	border:0px;
}


/* 
	去掉默认的大小  -- 让h标签继承body的font-size的设置 
*/
h1, h2, h3, h4, h5, h6{
	font-size:100%;
	font-weight: normal;

}


/* 
	清除浮动、解决margin-top的塌陷 
*/
.clearfix:before, .clearfix:after{
	content: "";
	display: table;
}

.clearfix:after{
	clear:both;
}

.clearfix{
	/* ie的bug*/
	zoom:1;
}


/* 左浮动 */
.fl{
	float:left;
}
/* 右浮动 */
.fr{
	float: right;
}

    main.css

    .main_wrap{
	position:absolute;
	background-color:gold;
	right:0;
	left:0;
	top:0;
	bottom:0;

}






/* 顶部样式 */
.header{
	height:2.5rem;
	background-color: #37ab40;
	position: relative;  /*搜索框*/
}

.logo{
	display: block;
	width:4.8rem;
	height:1.9rem;
	margin:0.3rem auto 0;
}

.logo img{
	width:100%;
}

.search{
	width:1.6rem;
	height: 1.6rem;
	position: absolute;   /*绝对定位*/
	right:0.9rem;
	top:0.4rem;
	background:url(../images/icons.png) left top no-repeat;
	background-size:1.5rem 40.0rem;   /*缩放一半*/
}




/* 中间的样式 */
.center_con{
	position:absolute;
	left:0px;
	right:0px;
	top:2.5rem;
	bottom:2.5rem;
	background-color:#efefef;
	/*
	y轴方向内容多给滚动条
	x轴方向内容多了直接裁剪
	只自动出现竖向滚动条，不出现横向滚动条
	  */
	overflow-y: auto;    
	overflow-x: hidden; 
	padding-bottom: 0.5rem;
}

/*幻灯片*/
.slide{
	height:6.75rem;
}

.slide img{
	width:100%;
	height:100%;
}


.menu_con{
	height:9.25rem;
	margin-top:0.5rem;
	background-color:#fff;
	overflow: hidden;
}

.menu_con ul{
	width:18rem;
	height:8.375rem;
	margin:0.6rem auto 1.375rem;
	/*background-color:gold;*/
}


.menu li{
	width:3.0rem;
	height:4.05rem;
	float:left;
	/*background-color:pink;*/
	margin-right: 1.5rem;
}

.menu li a{
	display: block;
	height:2.50rem;
	background:url(../images/icons.png) 0.7rem  -2rem no-repeat;
	background-size:1.5rem 40.0rem;   /*缩放一半*/

}

.menu li:nth-child(2) a{
	background-position: 0.7rem  -4.5rem;


}

.menu li:nth-child(3) a{
	background-position:  0.7rem  -6.9rem ;


}

.menu li:nth-child(4) a{
	background-position: 0.7rem  -9.35rem ;


}

.menu li:nth-child(5) a{
	background-position:  0.7rem  -11.55rem ;

}

.menu li:nth-child(6) a{
	background-position: 0.7rem  -14rem ;


}

.menu li:nth-child(7) a{
	background-position: 0.7rem  -16.5rem ;

}

.menu li:nth-child(8) a{
	background-position:  0.7rem  -18.7rem ;

}

.menu h2{
	height: 1.25rem;
	font: bold 13px/1.25rem "Microsoft Yahei";
	color:#666;
	text-align: center;
}


/*公共模块 展示*/
.common_model{
	height:17.25rem;
	background-color:#fff;
	margin-top: 0.5rem;
}

.common_title{
	width:17.75rem;
	height:0.9rem;
	/*background-color:gold;*/
	margin:0.8rem auto 0;
	/*border-left:2px ;*/
}

.common_title h3{
	float: left;
	font:bold 15px/0.9rem "Microsoft Yahei" ;
	color:#fbc83d;
	border-left:0.25rem solid #fbc83d;
	text-indent: 0.4rem;
}

.common_title a{
	float:right;

	font:normal 12px/0.9rem "Microsoft Yahei";
	color:#7f7f7f;
}

.banner{
	display: block;
	width:17.75rem;
	height:4.5rem;
	margin:0.5rem auto 0;
	background:gold;

}
.banner img{
	width:100%;
	height:100%;
}


.goods_list{
	width:17.75rem;
	height:9.325rem;
	/*background-color:gold;*/
	margin:0.5rem auto 0;
}


.goods_list li{
	width:5.9rem;
	height:9.325rem;
	border-right:1px solid #e7e7e7;
	float:left;
	box-sizing: border-box;
	position: relative;
}

/*选择器，选择最后一个*/
.goods_list li:last-child{
	border-right: 0;
}



.goods_link{
	display: block;
	width:4.5rem;
	height:4.5rem;
	margin:0.375rem auto 0;

}

.goods_link img{
	width:100%;
	height:100%;
}

.goods_list h4{
	font:normal 15px/15px "Microsoft Yahei";
	width:5.0rem;
	margin:0.925rem auto 0;
	/* 
		多的文字是省略号
		1. 宽度固定
		2. overflow:hidden;
		3. 强制文字不换行
			white-space nowrap
		4. 超出部分显示省略号
			text-overflow: ellipsis;
	*/
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.unit{
	width:5.0rem;
	font:normal 12px/12px "Microsoft Yahei";
	color:#bbb;
	margin:0.8rem auto 0;

}

.price{
	width:5.0rem;
	font:bold 12px/12px "Microsoft Yahei";
	color:#ff4400;
	margin:0.5rem auto 0;
}

.add_chart{
	position: absolute;
	width:2.0rem;
	height: 2.0rem;
	background:url(../images/icons.png) 0.25rem -21.5rem no-repeat;
	background-size:1.5rem 40.0rem;
	right: 0.675rem;
	bottom: 0;


}


/*尾部的样式*/
.footer{
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:3rem;
	background-color:lightgreen;
}

/*流体布局*/
.footer li{
	width:25%;
	height:2.5rem;
	float:left;

}

.footer li a{
	display: block;
	width:1.6rem;
	height:1.6rem;
	margin:0.35rem auto 0;
	background:url(../images/icons.png) left -24rem no-repeat;
	background-size:1.5rem 40.0rem;
}


.footer li:nth-child(2) a{
	background-position: left -26.69rem;
}

.footer li:nth-child(3) a{
	background-position: left -29.1rem;
}

.footer li:nth-child(4) a{
	background-position: left -31.4rem;
}

.footer li h2{
	text-align: center;
	font:normal 12px/0.8rem "Microsoft Yahei";
	color:#949392;
	margin-top: 0.2rem;
}
/* 
	幻灯片上的箭头
*/
.swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 25px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size:20px 35px;
    background-position: center;
    background-repeat: no-repeat
}


.swiper-pagination {
  	text-align:right;
}

.swiper-pagination-bullet-active {
	/*小圆点的颜色*/
    background: yellowgreen;
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination span:last-child{
	/*最后一个span*/
	margin-right: 20px;
}

    效果图：
    在这里插入图片描述

V-Sugar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端使用localStorage缓存Js和css文的方法(web开发)
11-26
将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间，下面的代码可以实现此功能： [removed] //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js"); addFile("
跨平台移动开发实战（九）------移动端本地存储方案
hyshucom
07-23 457
虽然数据都有Server端提供，但移动程序开发一般都需要支持offline使用模式，因此需要移动客户端本地存储数据，我按数据类型不同分为三种实现方案： 简单数据（key-value）：HTML5 Web Storage 复杂数据（SQL）：HTML5 Web SQL Database 二进制文件（File）：File API &amp; Phonegap plugin 1）简单数据（key...
Javascript高级知识之移动端和本地存储
清辞的博客
11-04 1132
移动端触屏事件 移动端常见特效 移动端开发插件框架 window.sessionStorage window.localStorage
JS本地存储
qq_39748755的博客
06-08 392
1、Cookie---用户相关数据本地存储（可设置存储时间） （1）、什么是cookie 需求情景： 假设你有一个网站，你想要他登录一次后，七天内就实现免登录，也就是说这个时候你需要在七天之内记住他的登录 状态，这时你该怎么办？ 解决方案有很多，我...
JS.4-PC端、移动端网页特效, 本地存储
qq_54379580的博客
08-06 589
PC端、移动端网页特效, 本地存储
微信小程序-生鲜商城示例源码
06-11
它基于JavaScript语言，结合了WXML（Weixin Markup Language）和WXSS（Weixin Style Sheet）进行界面渲染，同时使用JSON进行页面配置。开发者可以通过微信开发者工具进行编写、调试和预览，最终发布到微信平台。 在...
118-微信小程序-生鲜商城.zip
最新发布
06-11
2. 数据管理：小程序采用MVVM（Model-View-ViewModel）模式，数据模型通过wx.setStorageSync和wx.getStorageSync进行本地存储，通过Page对象的data属性管理页面数据，并使用setData方法实时更新视图。 3. 商品展示...
微信小程序设计-生鲜商城.zip
12-20
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。它的设计目标是提供一种无需下载安装即可使用的应用体验，用户扫一扫或搜一下就能打开应用，极大地降低了用户获取服务的门槛。在这个...
微信小程序-开发的生鲜商城示例
06-01
使用微信小程序的`wx.setStorageSync`和`wx.getStorageSync`方法进行本地数据存储，提高用户体验。 5. **网络请求与API接口** `wx.request`是微信小程序用于与服务器通信的主要方法，实现商品数据的获取、订单...
生鲜O2O源码
10-19
生鲜O2O源码是针对在线生鲜零售领域开发的一套完整的软件系统，它结合了移动端应用（Android）和服务端架构，旨在提供高效、便捷的线上购物体验。在深入理解这一主题之前，我们先来逐一解析相关知识点。 1. **生鲜...
生鲜超市前端页面
08-25
打造生鲜超市学习前端项目全代码全html页面全代码！
移动端localstorage本地存储的使用
liangmaxmin的博客
07-29 3320
window.sessionStorage window.localstorage
随手笔记13-移动端事件-本地存储
老男孩的博客
07-17 233
一、触屏事件 1.触屏事件概述 移动端浏览器兼容性较好，不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 2.触摸事件对象（touchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于
手机端html本地存储,HTML5 web storage本地存储
weixin_33609020的博客
06-18 475
html>document.getElementById('btn').onclick=function(){alert('添加数据成功');localStorage.setItem('shopname','选择这个');localStorage.setItem('bt','选择这个02');localStorage.setItem('gg','选择这个03');localSto...
uni-app 移动端本地储存数据库sqlite
刘刘刘的博客
02-27 1590
1.manifest.json勾选sqlite权限。你可以根据自己的需求，修改部分代码。也可以通过修改json配置文件。
HTML5移动开发实战必备知识——本地存储(1)
fareise的博客
02-27 1908
本地缓存是HTML5出现的新技术，这个技术的出现使得移动web的开发成为了可能。我们都知道，要想打造一个高性能的移动应用，速度是关键。而在HTML5之前，只有cookie能够存储数据，大小只有4kb。这严重限制了应用文件的存储，导致web开发的移动应用程序需要较长的加载时间。有了本地存储，让web移动应用能够更接近原生。          浏览器中，本地存储通过window.localStora
H5中的本地储存
CSND7997的博客
01-14 866
传统方式我们用document.cookie来储存，但是储存大小较小，而且解析复杂，HTML5提出新的解决方案，使用sessionStorage和localStorage存储数据。 localStorage： 1. 永久生效 2. 多窗口共享 3. 容量大约为20M ◆window.localStorage.setItem(key,value) 设置存储内容 ...
【移动端页面适配】一.H5的页面存储（本地存储）；二.元素的拖拽；三.移动页面的布局；四.常用的相对单位
weixin_44892365的博客
12-08 481
【移动端页面适配】一.H5的页面存储（本地存储）；二.元素的拖拽；三.移动页面的布局；四.常用的相对单位
手机端html本地存储,使用jqMobi开发app基础：HTML5 LocalStorage 本地存储详解
weixin_39529443的博客
06-20 265
在开发app时，会经常用到HTML5 LocalStorage 本地存储相关的资料。例如记住用户名，原来是使用cookie，现在基本都改成了LocalStorage 。使用LocalStorage 其实很简单，localStorage.setItem(key, value );设置值，localStorage.getItem(key)读取值。可以使用的代码：LocalMobelInfo = fun...
生鲜电商-移动端高保真原型模板 rp
11-04
生鲜电商移动端高保真原型模板rp（Rapid Prototyping）是一种快速设计和开发的工具，可以用于创建生鲜电商移动应用的原型。这个模板提供了一个可视化的界面，可以用于演示和测试移动应用的功能和用户界面。 这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值