cari

Rumah >hujung hadapan web >Tutorial H5 >Storan tempatan HTML5 aplikasi Storan Web pengenalan_html5 kemahiran tutorial

Storan tempatan HTML5 aplikasi Storan Web pengenalan_html5 kemahiran tutorial

WBOY
WBOYasal
2016-05-16 15:50:361448semak imbas

Storan Web ialah ciri yang sangat penting yang diperkenalkan oleh HTML5 Ia boleh menyimpan data secara setempat pada klien, serupa dengan kuki HTML4, tetapi fungsinya jauh lebih berkuasa daripada kuki Saiz kuki adalah terhad kepada 4KB secara rasmi 5MB.
Storan Web terbahagi kepada dua jenis :
sessionStorage
localStorage
Ia boleh dilihat dengan jelas daripada makna literal bahawa sessionStorage menyimpan data dalam sesi dan penyemak imbas ditutup . Itu tiada; localStorage sentiasa menyimpan data secara setempat pada klien
Sama ada sessionStorage atau localStorage, API yang boleh digunakan adalah sama dan yang biasa digunakan adalah seperti berikut (mengambil localStorage sebagai contoh):
Simpan data: localStorage.setItem(key,value);
Baca data: localStorage.getItem(key); clear ();
Dapatkan kunci indeks: localStorage.key(index);
Seterusnya, kami membangunkan applet buku alamat ringkas melalui Storan Web untuk menunjukkan penggunaan API yang berkaitan:
Masukkan kenalan mempunyai dua medan: nama dan nombor telefon mudah alih nombor telefon mudah alih sebagai kunci untuk menyimpannya dalam localStorage; Seperti berikut
:




Salin kod

Kod tersebut adalah seperti berikut:

/title> ; </div></head> </div><body> < label for="user_name">Nama:</label> <div class="msgborder" id="phpcode73"><input type="text" id="user_name" name="user_name" class="text"/> ;br /> <br><label untuk="telefon mudah alih">Telefon mudah alih: </label> <br> <br/> <br><input type="button" onclick="save()" value="rekod baharu"/> <br><hr/> label untuk ="search_phone">Masukkan nombor telefon mudah alih:</label> <br><input type="text" id="search_phone" name="search_phone"/> <br><input type= "button" onclick="find()" value="Cari pemilik"/> <br><p id="find_result"><br/></p> ; <br><br/> <br><div id="list"> <br><br><br>Antara muka ditunjukkan seperti berikut<br>: <br><br> <br>Untuk menyimpan kenalan, anda hanya perlu melaksanakan kaedah JS berikut: <br><br><br><br><br><br>Salin kod<br><br><br>Kod adalah seperti berikut:<br><br> </div>//Simpan data<br>fungsi simpan(){ <strong>var telefon bimbit = document .getElementById("telefon bimbit").value; </strong>var user_name = document.getElementById("user_name").value; <br>localStorage.setItem(telefon bimbit,nama_pengguna); 🎜><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010615435390.png" align="middle"><br><br>Untuk mencari pemilik, laksanakan kaedah JS berikut<br>: <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode74'));"><u></u></span>Salin kod</div></div> <div class="msgborder" id="phpcode74">Kod Seperti berikut: <br><br> <br>//Cari data<br>fungsi find(){ <br>var search_phone = document.getElementById("search_phone").value; name = localStorage.getItem( search_phone); <br>var find_result = document.getElementById("find_result"); <br>find_result.innerHTML = search_phone "Pemilik ialah: " nama; </div> <br><strong>Untuk memaparkan semua maklumat hubungan yang disimpan, anda perlu menggunakan kaedah localStorage.key(index), seperti berikut: </strong><br><br><div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode75'));"> Salin kod<u> </u></span>Kod adalah seperti berikut:</div> <div class="msgborder" id="phpcode76"> <br>//Ekstrak semua objek yang disimpan dalam localStorage dan paparkannya pada antara muka <br>function loadAll(){ <br>var list = document.getElementById("list"); length>0){ <br>var result = "<table border='1'>"; <br>result = "<tr><td>Nama</td>< td>Nombor telefon bimbit<. ;/td></tr>"; <br>for(var i=0;i<localStorage.length;i ){ <br>var handphone = localStorage.key(i); <br>var name = localStorage .getItem(telefon bimbit); <br>hasil = "<tr><td>" nama "</td><td>" } <br>result = "</table>"; <br>list.innerHTML = result; <br>} <br>} <br><br><br>Kesannya adalah seperti berikut: <br><br> </div>Masalah: Demo di atas hanya mempunyai 2 medan, nama dan nombor telefon bimbit , jika anda ingin menyimpan maklumat hubungan yang lebih kaya, seperti nama syarikat, alamat rumah, dsb., bagaimana untuk mencapainya? Bukankah Storan Web hanya mengendalikan rentetan? Pada masa ini, anda boleh menggunakan kaedah stringify() JSON untuk menukar objek kompleks kepada rentetan dan menyimpannya dalam Storan Web apabila membaca daripada Storan Web, anda boleh menggunakan kaedah parse() JSON untuk menukarnya menjadi objek JSON; 🎜>Berikut ialah demonstrasi mudah untuk menambah kod JS untuk menyimpan kenalan dengan atribut syarikat<br>: <br><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010615435392.png" align="middle"><br><br><strong></strong>Salin kod<br><br><div class="msgheader">Kodnya adalah seperti berikut: <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));"> <u>//Simpan data</u>fungsi simpan(){ </span>var contact = new Object; </div>contact.user_name = document.getElementById(" nama_pengguna"). nilai; </div>contact.mobilephone = document.getElementById("mobilephone").value; <div class="msgborder" id="phpcode77">contact.company = document.getElementById("company").value; <br>var str = JSON. stringify(contact) ; <br>localStorage.setItem(contact.mobilephone,str); <br>loadAll(); function loadAll(){ <br>var list = document.getElementById("list"); ; <br>hasil = "<tr><td>Nama</td><td>Telefon bimbit</td><td>Syarikat</td></tr>"; (var i=0;i<localStorage.length;i ){ <br>var telefon bimbit = localStorage.key(i); <br>var str = localStorage.getItem(telefon bimbit); (str); <br>hasil = "<tr><td>" contact.user_name "</td><td>" contact.mobilephone "</td><td>" "</td></tr>"; <br>} <br>hasil = "</table>"; innerHTML = "Data pada masa ini kosong, mula menambah kenalan dengan cepat";</div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="HTML5 Membentuk Semula Dunia Web Bagaimana Ia Akan Mengubah Internet_html5 Petua Tutorial" href="https://m.php.cn/ms/faq/6528.html">HTML5 Membentuk Semula Dunia Web Bagaimana Ia Akan Mengubah Internet_html5 Petua Tutorial</a></span><span>Artikel seterusnya：<a class="dBlack" title="HTML5 Membentuk Semula Dunia Web Bagaimana Ia Akan Mengubah Internet_html5 Petua Tutorial" href="https://m.php.cn/ms/faq/6531.html">HTML5 Membentuk Semula Dunia Web Bagaimana Ia Akan Mengubah Internet_html5 Petua Tutorial</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>