storage的用法、关于储存问题

分类：HTML5+

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 负责人:无分享

3 个回复

最佳回复

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

<!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 - 莫问前程凶吉,但求落幕无悔

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

烟雨江南 (作者)

那为什么退出来了，再进去的时候，输入框还是没有值呢（曾经输入过）？

2015-01-23 14:51

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

storage的用法、关于储存问题

3 个回复

公告

相关问题

storage的用法、关于储存问题

与内容相关的链接

3 个回复

公告

相关问题