Tutorial menggunakan Localstorage dalam kemahiran tutorial HTML5_html5

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;
//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
ini.removeNum
17. = 5
18. },
20. tegaskan: fungsi () {
21. jika (
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
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;
jika (!masa tamat) {
_d.setTime(_d.getTime() this.defaultLifeTime);
masa tamat
47. = _d.getTime( }  
49. //
50. this.setKeyCache(kunci, tamat masa);
51. entiti
=
52. ini.buildStorageObj(nilai, indate, tamat masa, tanda); > cuba {
53. this.sProxy.setItem(key, JSON.stringify(entiti));
kembali benar;
} tangkap (e) {
//Apabila storan setempat penuh, kosongkan semuanya
jika (
57. e.nama
== 'QuotaExceededError') {
// 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
jika (!this.removeLastCache()) buang 'Jumlah data yang disimpan kali ini terlalu besar';
60. set ini(kunci, nilai, tamat masa, tanda);
                                                              
61. konsol && console.log(e);
62. }
63. kembali palsu;
64. },
66. //Padam cache tamat tempoh
67. removeOverdueCache: function () {
68. var tmpObj = null, i, len;
var
70. sekarang = baharu Tarikh().getTime();
//Dapatkan pasangan nilai kunci
var
72. cacheStr = ini.sProxy.getItem(this.keyCache); var
CacheMap
73. = []; var
Peta baharu
74. = []; jika (!cacheStr) {
75. kembali;
76. }  
cacheMap
79. = JSON.parse(cacheStr
80. untuk (
i
81. = 0, len = Peta cache.panjang i < len i ) {
tmpObj
82. = CacheMap[i] jika (tmpObj.masa tamat
<
83. sekarang) { this.sProxy.removeItem(tmpObj.key);
} lain {
newMap.push(tmpObj);
85.                                                               
}  
this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
88. },
90. removeLastCache: function () {
91. var i, len;
var
92. num = ini.removeNum || 5;
93. //Dapatkan pasangan nilai kunci
94. var
cacheStr
95. = ini.sProxy.getItem(this.keyCache); var CacheMap
= [];
96. var delMap
= [];
//Menunjukkan bahawa storan terlalu besar
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
delMap
106. =
cacheMap
107. .splice(0, num); untuk (i = 0
,
108. len = delMap.panjang i < len i ) { this.sProxy.removeItem(delMap[i].key); }  
109. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
kembali benar;
},
setKeyCache: fungsi (kunci, tamat masa) {
jika (!key || !timeout || timeout
114. <
115. baharu
Date().getTime( )) kembali;
var i, len, tmpObj;
117. //Dapatkan rentetan nilai kunci yang sedang dicache var
oldstr
118. =
ini
119. .sProxy.getItem(this.keyCache);
var
120. Peta lama
= [];
121. //Sama ada kunci semasa sudah wujud var bendera
=
122. salah; var
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);
jika (!hasil) mengembalikan null;
hasil
161. = JSON.parse(hasil);
//Tamat tempoh data
jika (hasil.masa tamat
163. <
164. sekarang) kembalikan null; //Pengesahan tandatangan diperlukan
165. jika (tanda) {
166. jika (
tanda
167. === hasil.tanda)
168. pulangkan hasil.nilai; kembalikan null;
169. } lain {
170. pulangkan hasil.nilai;
171.                                                               
} tangkap (e) {
konsol && console.log(e);
}  
kembalikan null;
},
//Dapatkan tandatangan
getSign: fungsi (kunci) {
hasil var,
181. tanda
=
182. null
183. cuba { hasil
=
184. ini
.sProxy.getItem(key);
185. jika (hasil) { hasil =
JSON
186. .parse(hasil);
187. tanda = hasil && result.sign
                                                              
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;
//Kitaran hayat lalai bagi sekeping data, S ialah saat, M ialah minit, D ialah hari
11. ini.lifeTime = '30M'
//Data pulangan lalai
//
14. ini.defaultData = null
//Objek proksi, objek storan setempat
17. this.sProxy = baharu AbstractStorage();
},
setPilihan: fungsi (pilihan) {
_.lanjutkan(ini, pilihan);
22. },
24. tegaskan: fungsi () {
25. jika (
kunci.ini
26. === null) { buang 'tidak mengatasi harta kunci';
27. }  
28. jika (
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
>, a;   
106.       var obj = ini
.sProxy.get(this.key, sign);   
107.       var taip = jenis
 obj;   
108.       var o
 = { 'rentetan': true, 'number': true, 'boolean': true };   
      jika (o[type]) kembali obj;   
  
      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是移动开发必不可少的技术点，需要深入了解，具体业务代码业务代码后他的技术点，需要深入了解，具体业务代码业务代码后从他，后从美朋友可以去了解