烟雨江南
烟雨江南
  • 发布:2015-01-23 14:25
  • 更新:2015-01-23 14:59
  • 阅读:6501

storage的用法、关于储存问题

分类:HTML5+
<!DOCTYPE html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
		<title></title>  
		<script src="../js/mui.min.js"></script>  
		<link href="../css/mui.min.css" rel="stylesheet" />  
		<script type="text/javascript" charset="utf-8">  
			mui.init();  
		</script>  
		<style type="text/css">  
			#DivWarp {  
				margin-top: 20%;  
			}  
			#DivWarp button {  
				margin: 2.2em;  
			}  
			#DivWarp h3 {  
				text-align: center;  
				margin: 1em;  
			}  
		</style>  
	</head>  
  
	<body>  
		<div id="DivWarp">  
			<h3>关于本地信息存储测试:</h3>  
			<input id="input1" type="text" name="" id="" placeholder="请输入服务器地址" />  
			<input id="input2" type="text" name="" id="" value="" placeholder="请输入服务器端口" />  
			<button>确定</button>  
			<button>保存</button>  
			<button>取消</button>  
		</div>  
		<p>  
			需求:同一台手机只需要输入第一次,将第一次的数据(这里是服务器地址、端口)保存在手机本地。 之后的登陆都自动从本地获取数据,相当于cookie  
		</p>  
		<script type="text/javascript">  
			mui.plusReady(function STest() {  
				var input1 = document.getElementById("input1"); //服务器地址输入框  
				var input2 = document.getElementById("input2"); //服务器端口输入框  
				var aButton = document.getElementsByTagName('button'); //确定、保存、取消按钮  
				aButton[1].onclick = function() { //点击保存的时候将信息保存到本地供以后使用!  
					if (input1.value !== "") { //如果input1的值为非空,则将数值保存!  
						var SetMy = input1.value;//将输入框内容赋给SetMy  
						plus.storage.setItem("key",SetMy);  
						var Getmy = plus.storage.getItem("key");  
						//alert(Getmy);到了这里,该怎么做才能将数据保存到本地,  
                                               //供以后再进就直接调用呢?  
  
					}  
				}  
			})  
		</script>  
	</body>  
  
</html>

到了这里,该怎么做才能将数据保存到本地,
供以后再进就直接调用呢?

2015-01-23 14:25 负责人:无 分享
已邀请:

最佳回复

xiaoyi

xiaoyi - 莫问前程凶吉,但求落幕无悔

var STORAGE_IP_KEY = 'myIp';  
			var STORAGE_PORT_KEY = 'myPort';  
			var STORAGE_FLAG_KEY  ='Firstflag';  
			  
			 mui.plusReady(function STest() {  
			   
                var ip = document.getElementById("input1").value;   
                var port = document.getElementById("input2").value;   
                //这里换成ID可好?  
                var aButton = document.getElementsByTagName('button');   
                // 第一次保存  
                aButton[1].onclick = function() {   
                	// 判断是否第一次  flag:1 是第一次,0不是  
                	var flag = plus.storage.getItem(STORAGE_FLAG_KEY);  
                    if (ip != "" && port !="" && flag != 0) {   
                    	// 已经存储到了本地缓存  
                    	plus.storage.setItem(STORAGE_FLAG_KEY,0)  
                        plus.storage.setItem(STORAGE_IP_KEY,ip);  
                        plus.storage.setItem(STORAGE_PORT_KEY,port);  
                        alert('ip:' +ip +',port:' +port);  
                    }  
                }  
                // 以后就这样获取 要保证第一次保存一定会执行  
                function getIpAndPort(){  
                	var ip = plus.storage.getItem(STORAGE_IP_KEY);  
                    var port = plus.storage.getItem(STORAGE_PORT_KEY);  
                	 alert('ip:' +ip +',port:' +port);  
                }  
                  
            })
  • 烟雨江南 (作者)

    嗯,这不错,哈哈,以后的童鞋看到了就一目了然了,赞


    2015-01-23 14:56

bxh201

bxh201

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>关于本地信息存储测试:</title>  
        <link rel="stylesheet" href="css/mui.min.css" />  
        <link href="../css/mui.min.css" rel="stylesheet" />  
        <style type="text/css">  
        	body{margin: 10px; background: #eee;}  
        	#DivWarp {margin-top: 4%;}  
        </style>  
    </head>  
  
    <body>  
    	<header class="mui-bar mui-bar-nav">  
    		<h1 class="mui-title">关于本地信息存储测试</h1>  
    	</header>  
    	<div class="mui-content" id="DivWarp">  
            <input class="mui-input-row" type="text" name="ip" id="ip" placeholder="请输入服务器地址" />  
            <input type="text" name="port" id="port" value="" placeholder="请输入服务器端口" />  
            <button class="mui-btn mui-btn-block mui-btn-primary" id="saveLoginInfo">保存</button>  
    	</div>  
        <p>  
            需求:同一台手机只需要输入第一次,将第一次的数据(这里是服务器地址、端口)保存在手机本地。 之后的登陆都自动从本地获取数据,相当于cookie  
        </p>  
        <script type="text/javascript" src="js/mui.min.js" ></script>  
        <script type="text/javascript" charset="utf-8">  
            window.onload = function(){  
            	mui.init({  
            		swipeBack: false  
            	});  
            	mui.plusReady(function(){  
            		initView();  
            		initListener();  
            	});  
            };  
              
            function initView(){  
            	var a = plus.storage.getItem("ip");   
        		if(a){  
        			mui.toast('ip ::: from storage');  
        			document.getElementById("ip").value = a;  
        		};  
        		var b = plus.storage.getItem("port");   
        		if(b){  
        			mui.toast('port ::: from storage');  
        			document.getElementById("port").value = b;  
        		};  
            };  
            function initListener(){  
            	mui('.mui-content').on('tap', 'button', function(){  
            		var ip = document.getElementById("ip");  
            		var port = document.getElementById("port");  
            		if(ip.value != '' && port.value != ''){  
            			plus.storage.setItem("ip", ip.value);  
            			plus.storage.setItem("port", port.value);  
            			// goto next case  
            			alert("该跳转到新页面去了...");  
            		}else{  
            			mui.toast("写这个例子,我也是喝多了。。");  
            		}  
            	})  
            };  
        </script>  
    </body>  
</html>
  • 烟雨江南 (作者)

    嘿嘿,少喝点~


    2015-01-23 15:15

xiaoyi

xiaoyi - 莫问前程凶吉,但求落幕无悔

plus.storage.setItem("key",SetMy);
你这已经保存了,以后每次就getItem一次,如果有就直接用,没有就再次请求。
加个判断

  • 烟雨江南 (作者)

    那为什么退出来了,再进去的时候,输入框还是没有值呢(曾经输入过)?


    2015-01-23 14:51

该问题目前已经被锁定, 无法添加新回复