Tutorial menggunakan Localstorage dalam kemahiran tutorial 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

<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
tinggi: 100px;">
div>
<input taip="teks" id="teks" />
<pilih id="taip" >
<pilihan nilai="sesi" >sessionStoragepilihan>
<pilihan nilai="tempatan" >localStoragepilihan>
pilih>
<butang onklik="simpan( );">
保存数据butang>
<butang onklik="load( );">
读取数据butang>
<skrip taip="teks/ javascript">
var msg = dokumen.getElementById('msg'),
teks = dokumen.getElementById('text'), >
taip = dokumen.getElementById('type');
fungsi save() {
var str = teks.value;
var t = taip.nilai;
jika (t == 'sesi') {
sessionStorage.setItem('msg', str);
} lain {
localStorage.setItem('msg', str);
}
}
fungsi beban() {
var t = taip.nilai;
jika (t == 'sesi') {
msg.innerHTML = sessionStorage.getItem('msg');
} lain {
msg.innerHTML = localStorage.getItem('msg');
}
}
skrip>

　真实场景

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

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

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

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

Kod XML/HTML

复制内容到剪贴板

takrif([], fungsi () {
var Storan = _.warisan({
//Atribut lalai
sifat: fungsi () {
//Objek proksi, lalai ialah storan setempat
this.sProxy = tetingkap.localStorage;
//60 * 60 * 24 * 30 * 1000 ms ==30 hari
ini.defaultLifeTime = 2592000000;
ini.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';
//Apabila kapasiti cache penuh, bilangan cache dipadamkan setiap kali
= 5
},
tegaskan: fungsi () {
jika (
=== null) { buang 'not override sProxy property';
}
},
mulakan: fungsi (pilihan) {
this.propertys();
this.assert();
},
/*
Tambah storan setempat
Format data termasuk nilai kunci unik, rentetan json, tarikh luput, tarikh deposit
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
Hanya satu maklumat akan dicache untuk setiap nilai kunci
*/
set: fungsi (kunci, nilai, tamat masa, tanda) {
var _d = baharu Tarikh(
//Tarikh deposit
var indate = _d.getTime(
//Akhirnya data disimpan
var entiti = null;
= _d.getTime( }
//
this.setKeyCache(kunci, tamat masa);
entiti
ini.buildStorageObj(nilai, indate, tamat masa, tanda); > cuba {
this.sProxy.setItem(key, JSON.stringify(entiti));
e.nama
//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
set ini(kunci, nilai, tamat masa, tanda);
konsol && console.log(e);
}
kembali palsu;
},
//Padam cache tamat tempoh
removeOverdueCache: function () {
var tmpObj = null, i, len;
sekarang = baharu Tarikh().getTime();
cacheStr = ini.sProxy.getItem(this.keyCache); var
= []; var
= []; jika (!cacheStr) {
kembali;
}
= JSON.parse(cacheStr
untuk (
= 0, len = Peta cache.panjang i < len i ) {
= CacheMap[i] jika (tmpObj.masa tamat
sekarang) { this.sProxy.removeItem(tmpObj.key);
},
removeLastCache: function () {
var i, len;
num = ini.removeNum || 5;
//Dapatkan pasangan nilai kunci
var
= ini.sProxy.getItem(this.keyCache); var CacheMap
var delMap
cacheMap.sort(fungsi (a, b) {
kembali a.masa tamat - b.masa tamat;
});
//Apakah data yang telah dipadamkan
=
.splice(0, num); untuk (i = 0
len = delMap.panjang i < len i ) { this.sProxy.removeItem(delMap[i].key); }
this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
<
baharu
//Dapatkan rentetan nilai kunci yang sedang dicache var
=
.sProxy.getItem(this.keyCache);
Peta lama
//Sama ada kunci semasa sudah wujud var bendera
salah; var
= {};
obj.key = key;
obj.masa tamat = masa tamat;
jika (oldstr) {
oldMap = JSON.parse(oldstr);
jika (!_.isArray(oldMap)) oldMap = [];
}
untuk (i = 0, len = Peta lama.panjang; i < len; i ) {
tmpObj = Peta lama[i];
jika (tmpObj.key == kunci) {
Peta lama[i] = obj;
bendera = benar;
rehat;
}
}
jika (!flag) oldMap.push(obj);
//最后将新数组放到缓存中
this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));
},
buildStorageObj: fungsi (nilai, indate, tamat masa, tanda) {
var obj = {
nilai: nilai,
masa tamat: masa tamat,
tanda: tanda,
indate: indate
};
kembali obj;
},
dapatkan: fungsi (kunci, tanda) {
var hasil, sekarang = baharu Tarikh().getTime();
cuba {
hasil = ini.sProxy.getItem(key);
= JSON.parse(hasil);
<
sekarang) kembalikan null; //Pengesahan tandatangan diperlukan
jika (tanda) {
jika (
=== hasil.tanda)
pulangkan hasil.nilai; kembalikan null;
} lain {
pulangkan hasil.nilai;
tanda
null
cuba { hasil
ini
jika (hasil) { hasil =
.parse(hasil);
tanda = hasil && result.sign
} tangkap (e) { konsol && console.log(e); }
tanda pulangan;
},
alih keluar: fungsi (kunci) {
kembali this.sProxy.removeItem(key);
},
jelas: fungsi () {
this.sProxy.clear();
}
});
Storage.getInstance = fungsi () {
jika (ini.contoh) {
kembali ini.contoh;
} lain {
kembali ini.contoh = baharu ini();
}
};
kembali Storan;
});

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

Kod XML/HTML

复制内容到剪贴板

define(['AbstractStorage'], fungsi (AbstractStorage) {
var Kedai = _.warisan({
//Atribut lalai
sifat: fungsi () {
//Setiap objek mesti mempunyai kunci storan dan tidak boleh diulang
kunci ini = null;
ini.lifeTime = '30M'
ini.defaultData = null
this.sProxy = baharu AbstractStorage();
},
tegaskan: fungsi () {
jika (
=== null) { buang 'tidak mengatasi harta kunci';
}
jika (
=== null) { buang 'not override sProxy property';
}
},
mulakan: fungsi (pilihan) {
this.propertys();
this.setOption(opts);
this.assert();
},
_getLifeTime: fungsi () {
var masa tamat = 0;
var str = ini.lifeTime;
var unit = str.charAt(str.length - 1);
var num = str.substring(0, str.length - 1);
var Peta = {
D: 86400,
H: 3600,
M: 60,
S: 1
};
jika (jenis unit == 'rentetan') {
unitunit = unit.toUpperCase();
}
masa tamat = bilangan;
jika (unit) masa tamat = Peta[unit];
//单位为毫秒
bilangan pulangan * tamat masa * 1000 ;
},
//缓存数据
set: fungsi (nilai, tanda) {
//获取过期时间
var tamat masa = baharu Tarikh();
masa tamat.setTime(masa tamat.getTime() ini._getLifeTime());
this.sProxy.set(this.key, value, timeout.getTime(), sign);
},
//设置单个属性
setAttr: fungsi (nama, nilai, tanda) {
kunci var, obj;
jika (_.isObject(name)) {
untuk (masukkan nama) {
jika (name.hasOwnProperty(key)) this.setAttr(k, nama[k], nilai);
}
kembali;
}
jika (!sign) tanda = ini.getSign();
//获取当前对象
obj = ini.get(sign) | {};
jika (!obj) kembali;
obj[name] = nilai;
set.ini(obj, tanda);
},
getSign: fungsi () {
kembali this.sProxy.getSign(this.key);
},
alih keluar: fungsi () {
this.sProxy.remove(this.key);
},
moveAttr: function (attrName) {
var obj = ini.get() || {};
jika (obj[attrName]) {
padam obj[attrName];
}
this.set(obj);
},
dapatkan: fungsi (tanda) {
var hasil = [], Kosong = benarbenar
var obj = ini
var taip = jenis
var o
untuk (var i = 0, lenobj.panjang; i < len; i ) {
hasil[i] = obj[i];
}
} lain jika (_.isObject(obj)) {
hasil = obj;
}
untuk (sebagai hasil) {
kosong = salah;
rehat;
}
kembali !isKosong ? hasil : null;
},
getAttr: fungsi (attrName, tag) {
var obj = ini.get(tag);
var attrVal = null;
jika (obj) {
attrVal = obj[attrName];
}
return attrVal;
}
});
Store.getInstance = fungsi () {
jika (ini.contoh) {
kembali ini.contoh;
} lain {
kembali ini.contoh = baharu ini();
}
};
pulangan Kedai;
});

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

Kod XML/HTML

复制内容到剪贴板