微信小程序 本地存储及登录页面处理实例详解
原创
5611
实例内容 登陆界面
处理登陆表单数据
处理登陆表单数据（异步）
清除本地数据登录界面：在app.json中添加登陆页面pages/login/login，并设置为入口。保存后，自动生成相关文件（挺方便的）。修改视图文件login.wxml&!--pages/login/login.wxml--&
&view class=&container&&
&form bindsubmit=&formSubmit&&
&view class=&row&&
&text&姓 名：&/text&
&input type=&text& name=&userName& placeholder=&请输入用户名& /&
&view class=&row&&
&text&密 码：&/text&
&input type=&password& name=&userPassword& placeholder=&请输入密码& /&
&view class=&row&&
&button type=&primary& form-type=&submit&&登陆&/button&
&/view&修改登陆样式login.wxss/* pages/login/login.wxss */
.container{
padding: 1
font-size: 0.9
line-height: 1.5
border-shadow: 1px 1px #0099CC;
align-items:
margin-bottom: 0.8
.row text{
flex-grow: 1;
text-align:
.row input{
font-size: 0.7
flex-grow: 3;
border: 1px solid #0099CC;
display: inline-
border-radius: 0.3
box-shadow: 0 0 0.15rem #
padding: 0.3
.row button{
padding: 0 2
}看下样式：form相关属性：属性名类型说明report-submitBoolean是否返回formId用于发送模板消息bindsubmitEventHandle携带form中的数据触发submit事件，event.detail = { value : {&name&:&value&} , formId:&& }bindresetEventHandle表单重置时会触发reset事件这里用到了bindsubmit ，用于处理提交的表单数据。input 相关属性属性名类型默认值说明valueString输入框的内容typeStringtextinput的类型，有效值：text,number,idcard,digit,time,datepasswordBooleanfalse是否是密码类型placeholderString输入框为空时占位符placeholder-styleString指定placeholder的样式placeholder-classStringinput-placeholder指定placeholder的样式类disabledBooleanfalse是否禁用maxlengthNumber140最大输入长度，设置为0的时候不限制最大长度auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性focusBooleanfalse使得input获取焦点bindchangeEventHandle输入框失去焦点时，触发bindchange事件，event.detail={value:value}bindinputEventHandle除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。bindfocusEventHandle输入框聚焦时触发，event.detail = {value:value}bindblurEventHandle输入框失去焦点时触发，event.detail = {value:value}button 相关属性属性名类型默认值说明sizeStringdefault有效值default, minitypeStringdefault按钮的样式类型，有效值primary, default, warnplainBooleanfalse按钮是否镂空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带 loading 图标formTypeString无有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class=&none&时，没有点击态效果此Demo中将button的formType设置为submit用于激活表单提交事件。实例二: 处理登陆表单数据修改login.js// pages/login/login.js
userName:'',
userPassword:'',
formSubmit:function(e){
console.log(e.detail.value);//格式 Object {userName: &user&, userPassword: &password&}
//获得表单数据
var objData = e.detail.
if(objData.userName && objData.userPassword){
// 同步方式存储表单数据
wx.setStorageSync('userName', objData.userName);
wx.setStorageSync('userPassword', objData.userPassword);
//跳转到成功页面
wx.navigateTo({
url: '../index/index'
//加载完后，处理事件
// 如果有本地数据，则直接显示
onLoad:function(options){
//获取本地数据
var userName = wx.getStorageSync('userName');
var userPassword = wx.getStorageSync('userPassword');
console.log(userName);
console.log(userPassword);
if(userName){
this.setData({userName: userName});
if(userPassword){
this.setData({userPassword: userPassword});
onReady:function(){
// 页面渲染完成
onShow:function(){
// 页面显示
onHide:function(){
// 页面隐藏
onUnload:function(){
// 页面关闭
})这里使用到了wx.getStorageSync和wx.setStorageSync，这里说一下，上面这两个方法类似于HTML5的本地存储，属于同步存储方式。这两个方法，使用很简单，列下参数：wx.setStorageSync(KEY,DATA)属性名类型必填说明keyString是本地缓存中的指定的keydataObject/String是需要存储的内容wx.getStorageSync属性名类型必填说明KEYString是本地缓存中的指定的key修改一下login.wxml&view class=&row&&
&text&姓 名：&/text&
&input type=&text& name=&userName& placeholder=&请输入用户名& value=&{{userName}}& /&
&view class=&row&&
&text&密 码：&/text&
&input type=&password& name=&userPassword& placeholder=&请输入密码& value=&{{userPassword}}& /&
&/view&这个小实例，会在登陆的时候，将登陆信息存到本地存储，当下次登陆时，如果本地存储中有相应信息，则直接填写上。效果（再一次运行后，自动填写上了信息）：实例三: 处理登陆表单数据（异步）这里采用异步的方式存放数据。修改一下login.js// pages/login/login.js
userName:'',
userPassword:'',
formSubmit:function(e){
console.log(e.detail.value);//格式 Object {userName: &user&, userPassword: &password&}
//获得表单数据
var objData = e.detail.
if(objData.userName && objData.userPassword){
// 同步方式存储表单数据
wx.setStorage({
key:'userName',
data:objData.userName
wx.setStorage({
key:'userPassword',
data:objData.userPassword
//跳转到成功页面
wx.navigateTo({
url: '../index/index'
//加载完后，处理事件
// 如果有本地数据，则直接显示
onLoad:function(options){
var that =
//获取本地数据
wx.getStorage({
key: 'userName',
success: function(res){
console.log(res.data);
that.setData({userName: res.data});
wx.getStorage({
key: 'userPassword',
success: function(res){
console.log(res.data);
that.setData({userPassword: res.data});
onReady:function(){
// 页面渲染完成
onShow:function(){
// 页面显示
onHide:function(){
// 页面隐藏
onUnload:function(){
// 页面关闭
})wx.setStorage(OBJECT)属性名类型必填说明keyString是本地缓存中的指定的 keydataObject/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）wx.getStorage(OBJECT)属性名类型必填说明keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数,res = {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）实例四: 清除本地数据这里就不详细写了，直接介绍一下这两个清除本地数据的方法。wx.clearStorage()wx.clearStorageSync()直接执行即可实现。感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！您可能感兴趣的文章:微信小程序（应用号）简单实例应用及实例详解微信小程序 实战小程序实例微信小程序 for 循环详解微信小程序 WXML、WXSS 和JS介绍及详解微信小程序 数据访问实例详解微信小程序 参数传递详解微信小程序 wx:key详细介绍微信小程序 (十七)input 组件详细介绍微信小程序 实现列表刷新的实例详解微信小程序 （三）tabBar底部导航详细介绍微信小程序 获取微信OpenId详解及实例代码以上就是微信小程序 本地存储及登录页面处理实例详解 的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
PHP开发工程师
文章总浏览数如何统计微信中传播的H5页面的数据_百度知道
如何统计微信中传播的H5页面的数据
我有更好的答案
如果是自己做的，一般都会有自己的后台数据，如果是外包给其他公司做的，找他们要数据就可以了
要看你是什么是做的？如果是工具做的，工具里就会数据，可以看懂
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何统计微信中传播的H5页面的数据？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。61被浏览<strong class="NumberBoard-itemValue" title="1分享邀请回答93 条评论分享收藏感谢收起0添加评论分享收藏感谢收起阅读 19516
最近在开发基于微信的Web页面时，发现有些机型不能存储信息到localStorage中，或者是页面一旦关闭，存储的信息也失效了。
于是想到用cookie来替代localStorage，存储一些简单的数据。上网查找了一下，发现w3school上已有不错的解决方案。
//设置cookie
function&setCookie(c_name,value,expiredays)
var&exdate=new&Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+&"="&+escape(value)+
((expiredays==null)&?&""&:&";expires="+exdate.toGMTString())
//取回cookie
function&getCookie(c_name)
if&(document.cookie.length&0)
&&c_start=document.cookie.indexOf(c_name&+&"=")
&&if&(c_start!=-1)
c_start=c_start&+&c_name.length+1&
c_end=document.cookie.indexOf(";",c_start)
if&(c_end==-1)&c_end=document.cookie.length
return&unescape(document.cookie.substring(c_start,c_end))
//设置cookie，有效期为365天
setCookie('username','123',365);
//取回，若cookie失效，将返回空
getCookie('username');
经过测试，完全兼容，没有出现问题、
& 著作权归作者所有
人打赏支持
“”在线下联结了各位 OSCer，推广开源项目和理念，很荣幸有你的参与~
领取条件：参与过开源中国“源创会”的 OSCer 可以领取
码字总数 106718
但是这个微信退出重新登录缓存就又没了啊
评论删除后，数据将无法恢复
共同点： 都是保存在浏览器端,且同源的 cookie有什么缺点？ Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB 安全性问题。如果cookie被人拦截了，那人就...
君丶不易 ?
Web Storage，有时也称为DOMStorage，它提供在Web请求之间持久化数据，在此之前，远程Web服务器需要存储客户端和服务器间交互使用的所有相关数据。利用Web Storage，开发者可以将需要跨请求重...
html5 中的 web Storage 包括了两种存储方式：sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，会话...
前言 Safari开启无痕模式后，localStorage和sessionStorage为空，对其进行set操作也会报错，也就是说这种情况下，storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...
ITgecko ? 05/02 ?
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结...
COOKIES的限制和缺陷 首先，让我们来回顾下 cookies。Cookies 的出现可谓大大推动了Web的发展，但它既有优点也有一定的缺陷。Cookies 的优点在于，它可以允许我们在登陆网站时，记住我们输入...
晨曦之光 ?
在使用html5中localStorage，sessionStorage,cookie或者webDatabase（目前仅pc上部分浏览器支持）进行离线数据存储，转场数据交互，比如保存游戏状态，网络游戏脱机体验，另外，有时候在网络...
HTML5的本地化存储标准主要有以下3类： (1) Web Storage (2) Web SQL Database (3) IndexedDB 一、Web Storage Web Storage是目前得到支持最广泛的HTML5本地存储规范，IE 8+、FF 3.5+、Safar...
Aaron_DMC ?
一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空...
ywppengpeng ?
HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...
CHIEMINCHAN ? 05/11 ?
没有更多内容
加载失败，请刷新页面
工欲善其事必先利其器，如果有一款IDE可以让你更高效地专注于开发以及源码阅读，为什么不试一试? 3月27日，jetbrains正式发布期待已久的IntelliJ IDEA 2018.1，再次让人眼前一亮：什么，还能...
Mkeeper ? 29分钟前 ?
Project facet Java version 1.8 is not supported解决记录 一看知道是因为jdk版本不一致所导致，如何解决？ 方法一： 选中项目 Properties , 选择 Project Facets,右击选择 Java , Change ...
uug ? 33分钟前 ?
//静态遮照可以用官方提供的OpcityMask,但对动态的就无能为力了，下面是公司大神写的一个，记录如下： `import QtQuick 2.0 Item { property alias source: source.sourceproperty alias m...
蓝栩液枫 ? 33分钟前 ?
场景： Emoji表情符号为4个字节的字符，而 utf8 字符集只支持1-3个字节的字符，导致无法写入数据库。 升级方案： 修改数据库字符集character-set-server=utf8mb4 重启数据库生效。 修改mysql...
猿神出窍 ? 38分钟前 ?
下载地址::http://repo.spring.io/libs-release-local/org/springframework/spring/4.2.4.RELEASE/ 官网:::https://spring.io/projects/spring-framework...
码农屌丝 ? 51分钟前 ?
项目地址：http://www.freeteam.cn/ 简历管理 管理当前管理站点的简历数据。 1. 回复简历 选择需要回复的简历，然后点击“回复”。 注意：同时只能回复一个简历。 输入回复内容后，点击“回复...
freeteam ? 今天 ?
因为去年开始写博客了，也采用著名的zblog系统，因此对这套系统建立的名站比较感兴趣，也有关注，例如卢松松博客，是一个在国内比较出色的独立博客网站吧。 根据观察发现：卢松松博客以前是采...
原创小博客 ? 今天 ?
shell介绍 介绍（摘自百度百科）： Shell是系统的用户界面，提供了用户与内核进行交互操作的一种接口。它接收用户输入的命令并把它送入内核去执行 。 实际上Shell是一个命令解释器，它解释由...
杉下 ? 今天 ?
说明：有不少同学不能一次性把实验做成功，这是因为还不熟悉，建议至少做3遍 17.1 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后，在A上写数据，另外...
派派菠菜 ? 今天 ?
Osc乱弹歌单（2018）请戳（这里） 【今日歌曲】 @iSeesai ：@小小编辑 萌神我乱弹推荐首歌： 有的老歌回过头去再听一次又是另一种味道 《Looking with Cely》- Robert Bonfiglio 你们只感觉口...
小小编辑 ? 今天 ?
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有