本地存储与地图定位应用-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的简易应用程序，该程序利用浏览器的本地存储功能来保存用户输入的信息，并通过百度地图API实现了地理位置的标记与展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=38eb639e879917744ea99da35bd1648a"></script>
    <script src="jquery-1.7.2.js"></script>
    <script src="move.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .clear {
            clear: both;
        }

        #record {
            padding: 10px;
            float: left;
            border: 1px solid red;
            margin-right: 2px;
        }

            #record input[name=title] {
                height: 30px;
                width: 200px;
                outline: none;
                font-size: 16px;
            }

            #record textarea[name=content] {
                height: 400px;
                width: 300px;
                outline: none;
                resize: none;
                font-size: 16px;
            }

            #record p label {
                float: left;
                margin-right: 5px;
            }

        #detile {
            width: 300px;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
            left: 0px;
            top: 0;
        }

        #list {
            width: 900px;
            position: relative;
            height: 480px;
            left: 0px;
        }

            #list li {
                width: 300px;
                height: 200px;
                float: left;
            }

                #list li:first-child div {
                    border-bottom: 1px dashed red;
                    height: 26px;
                    line-height: 25px;
                    filter: alpha(opacity=0);
                    opacity: 0;
                    cursor: pointer;
                }

                #list li:nth-child(2) div #Go {
                    float: right;
                }

                #list li:nth-child(2) input[name=title] {
                    height: 30px;
                    width: 200px;
                    outline: none;
                    font-size: 16px;
                    border: none;
                }

                #list li:nth-child(2) textarea[name=content] {
                    height: 460px;
                    width: 300px;
                    outline: none;
                    resize: none;
                    font-size: 16px;
                    border: none;
                    border-top: 1px solid #e6dcdc;
                }

        #map {
            width: 300px;
            height: 480px;
        }
    </style>
</head>
<body>
    <div id="record">
        <form id="fr">
            <p>
                标题：
                <input type="text" name="title" />
            </p>
            <p>
                <label>内容：</label>
                <textarea name="content"></textarea>
            </p>
        </form>
        <button id="save_local">保存本地</button>
        <button id="save_server">保存服务器</button>
        <button id="del">删除所有数据</button>
        <input type="checkbox" id="Get_map" />记录地图位置
    </div>

    <div id="detile">
        <ul id="list">
            <li></li>
            <li>
                <div>
                    <input type="button" id="back" value="后退" />
                    <input type="button" id="Go" value="前进" />
                </div>
                <input type="text" name="title" />
                <textarea name="content"></textarea>
            </li>
            <li>
                <input type="button" id="back2" value="后退" />
                <div id="map"></div>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    var iNow = window.localStorage.getItem('num') || -1;

    var oUl = document.getElementById('list');
    var aLi = oUl.getElementsByTagName('li');
    $(document).ready(function () {

        if (window.localStorage.getItem('num')) {
            var list = arr(window.localStorage);
            //console.log(window.localStorage)
            for (var i = 0; i < list.length; i++) {
                if (isContains(list[i].name, 'title')) {
                    var oDiv = document.createElement('div');
                    oDiv.index = list[i].name.split('|')[1];
                    oDiv.innerHTML = window.localStorage.getItem(list[i].name);
                    AppOrInsertChild(aLi[0], oDiv);
                }

            }
        }
        //var aDiv = aLi[0].getElementsByTagName('div');
        //for (var i = 0; i < aDiv.length; i++) {
        //    aDiv[i].onmouseover = function () {
        //        this.style.cssText = 'background:red;color:#FFF';
        //    }
        //    aDiv[i].onmouseleave = function () {
        //        this.style.cssText = 'background:#FFF;color:#000';
        //    }
        //    aDiv[i].onclick = function (ev) {
        //        //console.log(this.index)
        //        var oTitle = $('#list li').eq(1).find('input[name=title]');
        //        oTitle.val(this.textContent);
        //        var oContent = $('#list li').eq(1).find('[name=content]');
        //        oContent.val(window.localStorage.getItem('content|' + this.index));

        //        StartMove(oUl, { left: -aLi[0].offsetWidth });
        //    }
        //}
        aLi[0].onmouseover = function (ev) {
            var ev = ev || event;
            var target = ev.target || ev.srcElement;
            // console.log(target.index);
            if (target.nodeName.toLowerCase() == 'div')
                //target.style.cssText = 'background:red;color:#FFF';
				{target.style.background='red';
				target.style.color='#FFF';}
        }
        aLi[0].onmouseout = function (ev) {
            var ev = ev || event;
            var target = ev.target || ev.srcElement;
            // console.log(target.index);
            if (target.nodeName.toLowerCase() == 'div')
			{
                //target.style.cssText = 'background:#FFF;color:#000';
				target.style.background='#FFF';
				target.style.color='#000';}
        }
        aLi[0].onclick = function (ev) {

            var ev = ev || event;
            var target = ev.target || ev.srcElement;
           
            if (target.nodeName.toLowerCase() == 'div') {
                var oTitle = $('#list li').eq(1).find('input[name=title]');
                oTitle.val(target.textContent);
                var oContent = $('#list li').eq(1).find('[name=content]');
                oContent.val(window.localStorage.getItem('content|' + target.index));
                if (window.localStorage.getItem('Get_map|' + target.index)) {
                    //alert(11);
                    $('#Go').get(0).disabled = false;
                } else {
                    $('#Go').get(0).disabled = true;
                }
                StartMove(oUl, { left: -this.offsetWidth });

            }
        }

    });


    $('#save_local').click(function () {
        var json = $('#fr').serializeArray();

        iNow++;
        window.localStorage.setItem(json[0].name + '|' + iNow, json[0].value);
        window.localStorage.setItem(json[1].name + '|' + iNow, json[1].value);
        window.localStorage.setItem('num', iNow);
        var isok = $('#Get_map').is(':checked');

        navigator.geolocation.getCurrentPosition(function (position) {
            var y = position.coords.longitude;
            var x = position.coords.latitude;
            var json = { y: y, x: x };
            if (isok)
            { window.localStorage.setItem('Get_map|' + iNow, JSON.stringify(json)); }
            else
            { window.localStorage.removeItem('Get_map|' + iNow);  }
            
        });
        createDiv(json);
        $('#Get_map').get(0).checked = false;
    });
    $('#del').click(function () {
        window.localStorage.clear();
        if (aLi[0].childNodes.length > 0) {
            for (var i = 0; i < aLi[0].childNodes.length; i++) {
                aLi[0].removeChild(aLi[0].childNodes[i]);
            }
            window.location.reload();
        }
    });
    $('#back').click(function () {
        StartMove(oUl, { left: 0 });
    });
    $('#back2').click(function () {
        StartMove(oUl, { left: -aLi[0].offsetWidth });
    });
    $('#Go').click(function () {
        StartMove(oUl, { left: -aLi[0].offsetWidth * 2 });
        var m = JSON.parse(window.localStorage.getItem('Get_map|' + iNow));
        var map = new BMap.Map("map");
        var pt = new BMap.Point(m.y, m.x);
        map.centerAndZoom(pt, 14);
        map.enableScrollWheelZoom();

        var marker2 = new BMap.Marker(pt);  // 创建标注
        map.addOverlay(marker2);
    });


    function isContains(str, substr) {
        return new RegExp(substr).test(str);
    }

    arr = function (json) {
        var str = decodeURI($.param(json));
        var result = [];
        var new_arr = str.split('&');
        for (var i = 0; i < new_arr.length; i++) {
            var sut = new_arr[i].split('=');
            var arr = {};
            arr.name = sut[0];
            arr.value = sut[1];
            result.push(arr);
        }
        return result;
    }
    function createDiv(json) {
        var oDiv = document.createElement('div');
        oDiv.innerHTML = json[0].value;

        AppOrInsertChild(aLi[0], oDiv);
    }

    function AppOrInsertChild(node, aporinnode) {
        if (node.childNodes.length > 0) {
            node.insertBefore(aporinnode, node.childNodes[0]);
        } else {
            node.appendChild(aporinnode);
        }
        aporinnode.index = parseInt(window.localStorage.getItem('num'));
        var h = aporinnode.offsetHeight;
        aporinnode.style.height = 0;
        h.innerHTML = '';
        StartMove(aporinnode, { height: h, opacity: 1 });
    }
</script>

　　所用move.js

  1 // JavaScript Document
  2 //缓冲运动
  3 
  4 
  5 //缓冲运动
  6  function StartMove(obj,json,fn){
  7         
  8         clearInterval(obj.timer);
  9         obj.timer=setInterval(function(){
 10              var bStop=true;
 11             
 12             for(var attr in json)
 13             {
 14                 var iCu=0;
 15                 if(attr=='opacity')
 16                 {iCu= parseInt(parseFloat(GetStyle(obj,attr))*100);}//处理小数问题，扩大倍数
 17                 else
 18                 {iCu=parseInt(GetStyle(obj,attr));}
 19                 
 20                 
 21                 var iSpeed=(json[attr]-(iCu))/8;
 22                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
 23                 if(iCu!=json[attr])
 24                 { bStop=false;}
 25                 if(attr=='opacity')
 26                 {
 27                     obj.style.filter='alpha(opacity:'+(iCu+iSpeed)+')';
 28                     obj.style.opacity=(iCu+iSpeed)*100;
 29                 }
 30                 else
 31                 {
 32                     obj.style[attr]=iCu+iSpeed+'px';
 33                 }
 34             }
 35             
 36             if(bStop)
 37             {
 38                 clearInterval(obj.timer);
 39                 if(fn)
 40                 {
 41                     fn();
 42                 }
 43             }
 44         },30);
 45         
 46         }
 47         
 48 //弹性运动
 49 var iSpeed_Tanxing=0;
 50 var left_Tanxing=0;//将 小数存放在变量中 解决小数显示问题
 51 function move_Tan(obj,iTaget){
 52 
 53     clearInterval(obj.timer);
 54     obj.timer=setInterval(function(){
 55         /*
 56         弹性运动公式
 57         */
 58         iSpeed_Tanxing+=(iTaget-obj.offsetLeft)/5;
 59         iSpeed_Tanxing*=0.7
 60         left_Tanxing+=iSpeed_Tanxing;
 61         
 62         if(Math.abs(iSpeed_Tanxing)<0.1&&Math.abs(left_Tanxing-iTaget)<0.1)//在一定范围内就停止定时器，解决目标点问题
 63         {clearInterval(obj.timer);obj.style.left=iTaget+'px';}
 64         else
 65         obj.style.left=left_Tanxing+'px';
 66         
 67         },30);
 68     }        
 69         
 70 //碰撞运动
 71 var iSpeedX_Pengzhuang=0;
 72 var iSpeedY_Pengzhuang=0;
 73 function move_Peng(obj){
 74     clearInterval(obj.timer);
 75     obj.timer=setInterval(function(){
 76         iSpeedY_Pengzhuang+=3;
 77         L=obj.offsetLeft+iSpeedX_Pengzhuang;
 78         T=obj.offsetTop+iSpeedY_Pengzhuang;
 79         if(T>=document.documentElement.clientHeight-obj.offsetHeight)
 80         {
 81                 iSpeedY_Pengzhuang*=-0.8;
 82                 iSpeedX_Pengzhuang*=0.8;
 83                 T=document.documentElement.clientHeight-obj.offsetHeight;
 84         }
 85         else if(T<=0)
 86         {
 87                 iSpeedY_Pengzhuang*=-0.8;
 88                 iSpeedX_Pengzhuang*=0.8;
 89                 T=0;
 90         }
 91         if(L>=document.documentElement.clientWidth-obj.offsetWidth)
 92         {
 93                 iSpeedY_Pengzhuang*=0.8;
 94                 iSpeedX_Pengzhuang*=-0.8;
 95                 L=document.documentElement.clientWidth-obj.offsetWidth;
 96         }
 97         else if(L<=0)
 98         {
 99                 iSpeedY_Pengzhuang*=0.8;
100                 iSpeedX_Pengzhuang*=-0.8;
101                 L=0;
102         }
103         if(Math.abs(iSpeedX_Pengzhuang)<0.5)
104         {
105             iSpeedX_Pengzhuang=0;
106         }
107         if(Math.abs(iSpeedY_Pengzhuang)<0.5)
108         {
109             iSpeedY_Pengzhuang=0;
110         }
111         obj.style.left=L+'px';
112         obj.style.top=T+'px';
113         },30);
114     }
115         
116         
117 function GetStyle(obj,attr){
118     
119     if(obj.currentStyle)
120     {
121         return obj.currentStyle[attr];
122         }
123     else
124     {
125         return getComputedStyle(obj,false)[attr];
126         }
127     };
128     
129 function getClassNames(oParent,className){
130     var obj=oParent.getElementsByTagName('*');
131     var attr=[];
132     var re=new RegExp('\\b'+className+'\\b');
133     for(var i=0; i<obj.length;i++)
134     {
135         if(re.test(obj[i].className))
136         {attr.push(obj[i]);}
137         }
138     return attr;
139     }