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

最新推荐文章于 2024-02-27 20:12:52 发布
最新推荐文章于 2024-02-27 20:12:52 发布
阅读量330 收藏
点赞数
分类专栏： 前端 文章标签： 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
    评论
专栏目录
静态资源（JS/CSS）存储在localStorage，适用于Web移动端H5页面制作
qq_24892029的博客
05-16 1080
localStorage使用(1)PC上应用价值不大：兼容性不太好，不支持LS的浏览器比例仍然很大网络速度快，协商缓存响应快，LS读取+eval很多时候会比不上304通常需要SEO，导致css不能缓存，仅缓存js使得整个缓存方案意义进一步减小浏览器本地缓存足够可靠持久跨页面间共享缓存即便有浪费也差别不大(2)移动端webapp值得一试：兼容性好网速慢，LS读取+eval大多数情况下快于304web...
【移动端页面适配】一.H5的页面存储（本地存储）；二.元素的拖拽；三.移动页面的布局；四.常用的相对单位
weixin_44892365的博客
12-08 483
【移动端页面适配】一.H5的页面存储（本地存储）；二.元素的拖拽；三.移动页面的布局；四.常用的相对单位
用html+css+js写一个移动端登录页面
weixin_35755434的博客
01-03 1197
好的，我会尽力帮你。 HTML (Hypertext Markup Language) 是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)，用来描述文档中的内容。 CSS (Cascading Style Sheets) 是一种样式表语言，用来描述 HTML 或 XML (包括如 SVG、HT...
JS--本地存储
weixin_52283867的博客
06-07 207
基础认知 localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输，说到这里就要跟sessionStorage 做一下区分！！ localStorage 和 sessionStorage 属性都允许在浏览器中存储 key/value 对的数据。但是localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。 不过他们的一些方法是相似的！！ 使用
uni-app 移动端本地储存数据库sqlite
刘刘刘的博客
02-27 1756
1.manifest.json勾选sqlite权限。你可以根据自己的需求，修改部分代码。也可以通过修改json配置文件。
微信小程序-生鲜商城示例源码
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`是微信小程序用于与服务器通信的主要方法，实现商品数据的获取、订单...
移动端使用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("
生鲜O2O源码
10-19
生鲜O2O源码是针对在线生鲜零售领域开发的一套完整的软件系统，它结合了移动端应用（Android）和服务端架构，旨在提供高效、便捷的线上购物体验。在深入理解这一主题之前，我们先来逐一解析相关知识点。 1. **生鲜...
js下载文件到本地(图片，excel,pdf)
bajiutao的博客
03-14 673
js下载文件到本地(图片，excel,pdf)
移动端Web开发
09-23
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
Javascript高级知识之移动端和本地存储
清辞的博客
11-04 1142
移动端触屏事件 移动端常见特效 移动端开发插件框架 window.sessionStorage window.localStorage
uni-app 移动端本地储存数据库sqlite，无存储限制
热门推荐
PrimaryColor
11-24 1万+
对于移动端，我们使用setStorage存储数据，但是这种方法总是有存储大小的限制，一般是2M或5M，如果我们希望存储到本地的数据无限制，就像微信聊天的消息一样，那么我们就必须使用移动端SQLite数据库。 SQLite模块用于操作本地数据库文件，可实现数据库文件的创建，执行SQL语句等功能。 官方文档位置： HTML5+ API Reference 方法： openDatabase: 打开数据库 isOpenDatabase: 判断数据库是否打开 closeDatabase: 关闭数据库
移动端localstorage本地存储的使用
liangmaxmin的博客
07-29 3343
window.sessionStorage window.localstorage
跨平台移动开发实战（九）------移动端本地存储方案
hyshucom
07-23 459
虽然数据都有Server端提供，但移动程序开发一般都需要支持offline使用模式，因此需要移动客户端本地存储数据，我按数据类型不同分为三种实现方案： 简单数据（key-value）：HTML5 Web Storage 复杂数据（SQL）：HTML5 Web SQL Database 二进制文件（File）：File API &amp; Phonegap plugin 1）简单数据（key...
生鲜电商-移动端高保真原型模板 rp
11-04
生鲜电商移动端高保真原型模板rp（Rapid Prototyping）是一种快速设计和开发的工具，可以用于创建生鲜电商移动应用的原型。这个模板提供了一个可视化的界面，可以用于演示和测试移动应用的功能和用户界面。 这个原型模板rp具有高保真度，意味着它能够忠实地反映出最终产品的外观和交互体验。它提供了各种生鲜电商应用所需的功能，如用户注册、登录、浏览商品、添加到购物车和支付等。同时，它还可以展示生鲜电商应用的不同界面，如首页、商品列表、商品详情、购物车和个人中心等。 通过使用rp原型模板，设计师可以更高效地展示设计创意和交互流程，开发人员可以更准确地理解需求，并加快开发速度。此外，rp原型模板还可以用于演示给投资者、团队成员或其他相关人员，以获得反馈和意见。 使用rp原型模板能够帮助生鲜电商团队更好地理解移动应用的用户体验，发现和解决潜在问题，并提供更好的用户界面和交互设计。通过rp原型模板，团队可以更迅速地迭代和优化移动应用，提高产品质量和用户满意度。 总之，生鲜电商移动端高保真原型模板rp是一种强大的工具，可以帮助设计和开发团队更好地构建生鲜电商移动应用，并提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值