masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Tutorial menggunakan Localstorage dalam kemahiran tutorial HTML5_html5

Tutorial menggunakan Localstorage dalam kemahiran tutorial HTML5_html5

WBOY
Lepaskan： 2016-05-16 15:46:27
asal
1661 orang telah melayarinya

Apakah storan setempat

Beberapa hari yang lalu, saya mendapati bahawa operasi kuki adalah sangat pelik dalam projek lama Selepas berunding, saya ingin menyimpan beberapa maklumat untuk mengelak daripada menghantar parameter pada URL, tetapi saya tidak mempertimbangkan masalah yang akan dihadapi kuki. punca:

　① Saiz kuki dihadkan kepada kira-kira 4k, yang tidak sesuai untuk menyimpan data perniagaan
　② Kuki dihantar bersama-sama dengan transaksi HTTP setiap kali, yang membazirkan lebar jalur

Kami sedang melakukan projek mudah alih, jadi teknologi yang sangat sesuai digunakan di sini ialah localstorage boleh dikatakan sebagai pengoptimuman kuki ia boleh digunakan untuk menyimpan data pada klien dengan mudah dan tidak akan dihantar HTTP, tetapi ia bukan Tiada masalah:

　① Saiz storan setempat dihadkan kepada kira-kira 5 juta aksara, dan penyemak imbas yang berbeza tidak konsisten
　② Storan setempat tidak boleh dibaca dalam mod privasi
　③ Intipati storan setempat ialah membaca dan menulis fail jika ada banyak data, ia akan tersekat (firefox akan Mengimport data ke dalam memori pada satu masa adalah menakutkan apabila anda memikirkannya)
④ storan setempat tidak boleh dirangkak oleh perangkak, jangan gunakannya untuk menggantikan sepenuhnya parameter URL yang lulus

Kecacatan tidak menyembunyikan kelebihan, masalah di atas dapat dielakkan, jadi tumpuan kita harus pada cara menggunakan localstorage, dan cara menggunakannya dengan betul.
Penggunaan storan setempat
Pengetahuan asas

Terdapat dua jenis objek storan storan setempat:

　① sessionStrage: session bermaksud sesi Sesi di sini merujuk kepada tempoh masa dari memasuki tapak web hingga menutup tapak web apabila pengguna melayari laman web Tempoh sah bagi objek sesi hanya begitu lama.

　② localStorage: Simpan data pada peranti perkakasan pelanggan, tidak kira apa pun peranti itu, yang bermaksud bahawa data akan tetap ada apabila komputer dihidupkan pada masa akan datang.

Perbezaan antara keduanya ialah satu untuk simpanan sementara dan satu lagi untuk simpanan jangka panjang.

Berikut ialah kod ringkas untuk menggambarkan penggunaan asasnya:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <div id="msg"  style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;   
  2.   tinggi: 100px;">  
  3. div>  
  4. <input taip="teks"  id="teks" />
  5. <pilih id="taip" >  
  6.   <pilihan nilai="sesi" >sessionStoragepilihan>  
  7.   <pilihan nilai="tempatan" >localStoragepilihan>  
  8. pilih>  
  9. <butang onklik="simpan( );">  
  10.   保存数据butang>  
  11. <butang onklik="load( );">  
  12.   读取数据butang>  
  13. <skrip taip="teks/ javascript">  
  14.   var msg = dokumen.getElementById('msg'),   
  15.             teks = dokumen.getElementById('text'),   >
  16.              taip = dokumen.getElementById('type');   
  17.   
  18.   fungsi save() {   
  19.     var str = teks.value;   
  20.     var t = taip.nilai;   
  21.      jika (t == 'sesi') {   
  22.       sessionStorage.setItem('msg', str);   
  23.     } lain {   
  24.       localStorage.setItem('msg', str);   
  25.     }   
  26.   }   
  27.   
  28.   fungsi beban() {   
  29.     var t = taip.nilai;   
  30.      jika (t == 'sesi') {   
  31.       msg.innerHTML = sessionStorage.getItem('msg');   
  32.     } lain {   
  33.       msg.innerHTML = localStorage.getItem('msg');   
  34.     }   
  35.   }   
  36. skrip>  

　真实场景

　　实际工作中对localstorage的使用一般有以下需求：

　　① 缓存一般信息，如搜索页的出发城市，达到城市，非实时定位俎息>　　② 缓存城市列表数据，这个数据往往比较大

　　③ 每条缓存信息需要可追踪，比如服务器通知城市数据更新，这个新，这个无问的时候要自动设置过期

　　④ 每条信息具有过期日期状态，在过期外时间需要由服务器拉取敎态

Kod XML/HTML
复制内容到剪贴板
  1. takrif([], fungsi () {
  3. var Storan = _.warisan({
  4. //Atribut lalai
  5. sifat: fungsi () {
  7. //Objek proksi, lalai ialah storan setempat
  8. this.sProxy = tetingkap.localStorage;
  10. //60 * 60 * 24 * 30 * 1000 ms ==30 hari
  11. ini.defaultLifeTime = 2592000000;
    13. //Cache tempatan digunakan untuk menyimpan pemetaan antara semua nilai kunci storan setempat dan tarikh tamat tempoh
  14. ini.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';
  15. //Apabila kapasiti cache penuh, bilangan cache dipadamkan setiap kali
    17. ini.removeNum
  17. = 5
  18. },
  20. tegaskan: fungsi () {
  21. jika (
    22. this.sProxy
  22. === null) { buang 'not override sProxy property';
  23. }  
  24. },
  26. mulakan: fungsi (pilihan) {
  27. this.propertys();
  28. this.assert();
  29. },
  31. /*
  32. Tambah storan setempat
  33. Format data termasuk nilai kunci unik, rentetan json, tarikh luput, tarikh deposit
    34. Tanda
  34. ialah parameter permintaan yang diformatkan, digunakan untuk mengembalikan data baharu apabila permintaan yang sama mempunyai parameter yang berbeza Contohnya, jika senarai itu adalah bandar Beijing, dan kemudian bertukar ke Shanghai, ia akan menilai bahawa teg itu adalah berbeza dan kemas kini data yang dicache adalah bersamaan dengan Tandatangan
  35. Hanya satu maklumat akan dicache untuk setiap nilai kunci
  36. */
  37. set: fungsi (kunci, nilai, tamat masa, tanda) {
  38. var _d = baharu Tarikh(
  39. //Tarikh deposit
  40. var indate = _d.getTime(
  42. //Akhirnya data disimpan
  43. var entiti = null;
    45. jika (!masa tamat) {
    46. _d.setTime(_d.getTime() this.defaultLifeTime);
    47. masa tamat
  47. = _d.getTime( }  
  49. //
  50. this.setKeyCache(kunci, tamat masa);
  51. entiti
    52. =
  52. ini.buildStorageObj(nilai, indate, tamat masa, tanda); > cuba {
  53. this.sProxy.setItem(key, JSON.stringify(entiti));
    54. kembali benar;
    55. } tangkap (e) {
    56. //Apabila storan setempat penuh, kosongkan semuanya
    57. jika (
  57. e.nama
    58. == 'QuotaExceededError') {
    59. // this.sProxy.clear();
  59. //Apabila storan setempat penuh, pilih data yang paling hampir dengan masa tamat tempoh untuk dipadamkan. Ini juga akan memberi kesan, tetapi rasanya lebih baik daripada mengosongkan semua cache, proses ini akan lebih memakan masa, dalam 100ms
    60. jika (!this.removeLastCache()) buang 'Jumlah data yang disimpan kali ini terlalu besar';
  60. set ini(kunci, nilai, tamat masa, tanda);
    61.                                                               
  61. konsol && console.log(e);
  62. }
  63. kembali palsu;
  64. },
  66. //Padam cache tamat tempoh
  67. removeOverdueCache: function () {
  68. var tmpObj = null, i, len;
    70. var
  70. sekarang = baharu Tarikh().getTime();
    71. //Dapatkan pasangan nilai kunci
    72. var
  72. cacheStr = ini.sProxy.getItem(this.keyCache); var
    73. CacheMap
  73. = []; var
    74. Peta baharu
  74. = []; jika (!cacheStr) {
  75. kembali;
  76. }  
    79. cacheMap
  79. = JSON.parse(cacheStr
  80. untuk (
    81. i
  81. = 0, len = Peta cache.panjang i < len i ) {
    82. tmpObj
  82. = CacheMap[i] jika (tmpObj.masa tamat
    83. <
  83. sekarang) { this.sProxy.removeItem(tmpObj.key);
    84. } lain {
    85. newMap.push(tmpObj);
  85.                                                               
    86. }  
    87. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
  88. },
  90. removeLastCache: function () {
  91. var i, len;
    92. var
  92. num = ini.removeNum || 5;
  93. //Dapatkan pasangan nilai kunci
  94. var
    95. cacheStr
  95. = ini.sProxy.getItem(this.keyCache); var CacheMap
    96. = [];
  96. var delMap
    97. = [];
    98. //Menunjukkan bahawa storan terlalu besar
    99. jika (!cacheStr) mengembalikan palsu;
  100. cacheMap.sort(fungsi (a, b) {
  101. kembali a.masa tamat - b.masa tamat;
  102. });
  104. //Apakah data yang telah dipadamkan
    106. delMap
  106. =
    107. cacheMap
  107. .splice(0, num); untuk (i = 0
    108. ,
  108. len = delMap.panjang i < len i ) { this.sProxy.removeItem(delMap[i].key); }  
  109. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
    110. kembali benar;
    111. },
    113. setKeyCache: fungsi (kunci, tamat masa) {
    114. jika (!key || !timeout || timeout
  114. <
  115. baharu
    116. Date().getTime( )) kembali;
    117. var i, len, tmpObj;
  117. //Dapatkan rentetan nilai kunci yang sedang dicache var
    118. oldstr
  118. =
    119. ini
  119. .sProxy.getItem(this.keyCache);
    120. var
  120. Peta lama
    121. = [];
  121. //Sama ada kunci semasa sudah wujud var bendera
    122. =
  122. salah; var
    123. obj
  123. = {};   
  124.       obj.key = key;   
  125.       obj.masa tamat = masa tamat;   
  126.   
  127.       jika (oldstr) {   
  128.         oldMap = JSON.parse(oldstr);   
  129.         jika (!_.isArray(oldMap)) oldMap = [];   
  130.       }   
  131.   
  132.        untuk (i = 0, len = Peta lama.panjang;  i < len;  i ) {   
  133.         tmpObj = Peta lama[i];   
  134.         jika (tmpObj.key == kunci) {   
  135.           Peta lama[i] = obj;   
  136.           bendera = benar;   
  137.           rehat;   
  138.         }   
  139.       }   
  140.        jika (!flag) oldMap.push(obj);   
  141.       //最后将新数组放到缓存中   
  142.       this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
  143.   
  144.     },   
  145.   
  146.     buildStorageObj: fungsi (nilai, indate, tamat masa, tanda) {   
  147.       var obj = {   
  148.         nilai: nilai,   
  149.         masa tamat: masa tamat,   
  150.         tanda: tanda,   
  151.         indate: indate   
  152.       };   
  153.       kembali obj;   
  154.     },
  156. dapatkan: fungsi (kunci, tanda) {
  157. var hasil, sekarang = baharu Tarikh().getTime();
  158. cuba {
  159. hasil = ini.sProxy.getItem(key);
    160. jika (!hasil) mengembalikan null;
    161. hasil
  161. = JSON.parse(hasil);
    162. //Tamat tempoh data
    163. jika (hasil.masa tamat
  163. <
  164. sekarang) kembalikan null; //Pengesahan tandatangan diperlukan
  165. jika (tanda) {
  166. jika (
    167. tanda
  167. === hasil.tanda)
  168. pulangkan hasil.nilai; kembalikan null;
  169. } lain {
  170. pulangkan hasil.nilai;
  171.                                                               
    173. } tangkap (e) {
    174. konsol && console.log(e);
    175. }  
    176. kembalikan null;
    177. },
    179. //Dapatkan tandatangan
    180. getSign: fungsi (kunci) {
    181. hasil var,
  181. tanda
    182. =
  182. null
  183. cuba { hasil
    184. =
  184. ini
    185. .sProxy.getItem(key);
  185. jika (hasil) { hasil =
    186. JSON
  186. .parse(hasil);
  187. tanda = hasil && result.sign
    188.                                                               
  188. } tangkap (e) { konsol && console.log(e); }  
  189.       tanda pulangan;   
  190.     },   
  191.   
  192.     alih keluar: fungsi (kunci) {   
  193.       kembali this.sProxy.removeItem(key);   
  194.     },   
  195.   
  196.     jelas: fungsi () {   
  197.       this.sProxy.clear();   
  198.     }   
  199.   });   
  200.   
  201.   Storage.getInstance = fungsi () {   
  202.     jika (ini.contoh) {   
  203.       kembali ini.contoh;   
  204.     } lain {   
  205.       kembali ini.contoh = baharu ini();   
  206.     }   
  207.   };   
  208.   
  209.   kembali Storan;   
  210.   
  211. });  

这段代码包含了localstorage的基本操作，并且对以上问题做了处理，而真实的使用实的使用实的使用实的使用圆还莲

Kod XML/HTML
复制内容到剪贴板
  1. define(['AbstractStorage'], fungsi (AbstractStorage) {
  3. var Kedai = _.warisan({
  4. //Atribut lalai
  5. sifat: fungsi () {
  7. //Setiap objek mesti mempunyai kunci storan dan tidak boleh diulang
  8. kunci ini = null;
    10. //Kitaran hayat lalai bagi sekeping data, S ialah saat, M ialah minit, D ialah hari
  11. ini.lifeTime = '30M'
    13. //Data pulangan lalai
    14. //
  14. ini.defaultData = null
    16. //Objek proksi, objek storan setempat
  17. this.sProxy = baharu AbstractStorage();
    19. },
    21. setPilihan: fungsi (pilihan) {
    22. _.lanjutkan(ini, pilihan);
  22. },
  24. tegaskan: fungsi () {
  25. jika (
    26. kunci.ini
  26. === null) { buang 'tidak mengatasi harta kunci';
  27. }  
  28. jika (
    29. this.sProxy
  29. === null) { buang 'not override sProxy property';
  30. }  
  31. },
  33. mulakan: fungsi (pilihan) {
  34. this.propertys();
  35. this.setOption(opts);
  36. this.assert();
  37. },   
  38.   
  39.     _getLifeTime: fungsi () {   
  40.       var masa tamat = 0;   
  41.       var str = ini.lifeTime;   
  42.       var unit = str.charAt(str.length - 1);   
  43.       var num = str.substring(0, str.length - 1);   
  44.       var Peta = {   
  45.         D: 86400,   
  46.         H: 3600,   
  47.         M: 60,   
  48.         S: 1  
  49.       };   
  50.       jika (jenis unit == 'rentetan') {   
  51.         unitunit = unit.toUpperCase();   
  52.       }   
  53.       masa tamat = bilangan;   
  54.        jika (unit) masa tamat = Peta[unit];   
  55.   
  56.       //单位为毫秒   
  57.       bilangan pulangan * tamat masa * 1000 ;   
  58.     },   
  59.   
  60.     //缓存数据   
  61.     set: fungsi (nilai, tanda) {   
  62.       //获取过期时间   
  63.       var tamat masa = baharu Tarikh();   
  64.       masa tamat.setTime(masa tamat.getTime()  ini._getLifeTime());   
  65.       this.sProxy.set(this.key, value, timeout.getTime(), sign);   
  66.     },   
  67.   
  68.     //设置单个属性   
  69.     setAttr: fungsi (nama, nilai, tanda) {   
  70.       kunci var, obj;   
  71.       jika (_.isObject(name)) {   
  72.         untuk (masukkan nama) {   
  73.            jika (name.hasOwnProperty(key)) this.setAttr(k, nama[k], nilai);   
  74.         }  
  75.         kembali;   
  76.       }   
  77.   
  78.       jika (!sign) tanda = ini.getSign();   
  79.   
  80.       //获取当前对象   
  81.       obj = ini.get(sign) | {};   
  82.       jika (!obj) kembali;   
  83.       obj[name] = nilai;   
  84.       set.ini(obj, tanda);   
  85.   
  86.     },   
  87.   
  88.     getSign: fungsi () {   
  89.       kembali this.sProxy.getSign(this.key);   
  90.     },   
  91.   
  92.     alih keluar: fungsi () {   
  93.       this.sProxy.remove(this.key);   
  94.     },   
  95.   
  96.     moveAttr: function (attrName) {   
  97.       var obj = ini.get() || {};   
  98.       jika (obj[attrName]) {   
  99.         padam obj[attrName];   
  100.       }   
  101.       this.set(obj);   
  102.     },   
  103.   
  104.     dapatkan: fungsi (tanda) {   
  105.       var hasil = [], Kosong = benarbenar
    106. >, a;   
  106.       var obj = ini
    107. .sProxy.get(this.key, sign);   
  107.       var taip = jenis
    108.  obj;   
  108.       var o
    109.  = { 'rentetan': true, 'number': true, 'boolean': true };   
    110.       jika (o[type]) kembali obj;   
    111.   
    112.       jika (_.isArray(obj)) {   
  112.         untuk (var i = 0, lenobj.panjang;  i < len;  i ) {   
  113.           hasil[i] = obj[i];   
  114.         }  
  115.       } lain jika (_.isObject(obj)) {   
  116.         hasil = obj;   
  117.       }   
  118.   
  119.       untuk (sebagai hasil) {   
  120.         kosong = salah;   
  121.         rehat;   
  122.       }   
  123.       kembali !isKosong ? hasil : null;   
  124.     },   
  125.   
  126.     getAttr: fungsi (attrName, tag) {   
  127.       var obj = ini.get(tag);   
  128.       var attrVal = null;   
  129.        jika (obj) {   
  130.         attrVal = obj[attrName];   
  131.       }   
  132.       return attrVal;   
  133.     }   
  134.   
  135.   });   
  136.   
  137.   Store.getInstance = fungsi () {   
  138.     jika (ini.contoh) {   
  139.       kembali ini.contoh;   
  140.     } lain {   
  141.       kembali ini.contoh = baharu ini();   
  142.     }   
  143.   };   
  144.   
  145.   pulangan Kedai;   
  146. });  

　　我们真实使用的时候是使用store这个类操作localstorage，代码结束简单测试：
　存储完成，以后都不会走请求，于是今天的代码基本结束 ，最后在android一中中是中中文一旦按下会回到上一个页面，这个时候里面的localstorage可能会读取失效！一个简单不靠谱的解决方案是在webapp中加入：

Kod XML/HTML
复制内容到剪贴板
  1. window.ounload = fungsi () { };//适合单页应用，不要义，不要问，不要问，不要问也不知道  
　结语

　　localstorage是移动开发必不可少的技术点，需要深入了解，具体业务代码业务代码后他的技术点，需要深入了解，具体业务代码业务代码后从他，后从美朋友可以去了解


Label berkaitan：
html5 localstorage
sumber：php.cn
Artikel sebelumnya：Penjelasan terperinci tentang penggunaan teg ol dalam kemahiran tutorial HTML5_html5 Artikel seterusnya：Berkongsi beberapa contoh halaman reka bentuk HTML5 dan kemahiran tutorial modification_html5
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan