Di rumah, menemani cuti hamil, membosankan, lihat proyek Anda sebelumnya, dan tiba -tiba menemukan bahwa gerobak belanja yang saya tulis sebelumnya diimplementasikan dengan database. efisiensi. Tiba -tiba, jika Anda dapat menggunakan penyimpanan lokal HTML5, itu akan sangat meningkatkan efisiensi program. Tentu saja, penyimpanan lokal HTML5 melibatkan kompatibilitas masing -masing browser dan ukuran (NKB) dari data penyimpanan. Apa yang perlu dijelaskan di sini adalah: jika Anda melakukan proyek mikro -micro kecil, maka Anda dapat mencoba menggunakan prosedur penyimpanan lokal HTML5 untuk mencapai keranjang belanja!
Bagian ini membahas fungsi penyimpanan lokal HTML5 untuk mewujudkan fungsi mobil belanja!
Itu harus dijelaskan: Bagian sebelumnya dari blog orang lain: HTML5 Penggunaan penyimpanan lokal, bagian ini menggunakan pengetahuan dari bagian sebelumnya untuk mewujudkan keranjang belanja!
Pertama -tama jelaskan pemikiran umum:Dalam tabel produk, ID produk berbeda.
Contoh spesifik adalah sebagai berikut:
Saat Anda mengklik 'Bergabunglah dengan keranjang belanja ", kode eksekusi adalah sebagai berikut:
var pid = $ (#hidpid). , PCOLOR: Warna}; == keyname) {localstorage.removeItem (keyname);}} localstorage.setitem (bat+pid, batstring);Di bawah Penjelasan Umum:
PID: ID komoditas
Warna: Warna produk
Num2: jumlah barang
BAT: JSON Object
BatString: String yang dikonversi menjadi objek JSON
Untuk Loop: Melintasi semua penyimpanan lokal saat ini. yang lama.
Akhirnya, Dynamic Storage, dinamis yang disebut SO, adalah kombinasi dari nilai kunci penyimpanan lokal dan ID produk. Dengan kata lain, produk yang berbeda akan disimpan sebagai nilai kunci yang berbeda. Akhirnya, kita hanya perlu menganalisis string ini dan string yang berbeda, dan kita akan mendapatkan keranjang belanja lengkap!
Hee hee, sederhana!
Jadi, bagaimana Anda bisa melintasi string NST ini? sebagai berikut:
Halaman beban mobil belanja:
$ (function () {for (var i = 0; i <localstorage.length; i ++) {var localValue = localstorage.getItem (localstorage.key (i)); var key = localstorage. key (i); if (Key! = Bat && Key.indexof (Bat)> = 0) {var obj = $ .parsejson (LocalValue); + PID + Jumlah Produk: + Num + Warna Produk: + Warna);}}});Penjelasan Umum:
Ini melintasi semua penyimpanan lokal dan mensyaratkan bahwa nilai kunci berisi pemotongan submix kelelawar dari penyimpanan lokal yang berbeda dari kelelawar. <Hindari penyimpanan lokal yang bertentangan dengan sistem lain, jadi permintaan harus berisi kelelawar>
Konversi JSON String ke objek JSON
Dan masukkan ID produk, jumlah produk, warna produk.
Dengan ID produk, warna produk, dan jumlah produk, maka kami dapat menggunakan JS atau AJAX untuk memuat keranjang belanja yang kami simpan secara lokal. Metode pemuatan spesifik adalah sebagai berikut:
$.ajax(...........)
atau:
JS menjahit html
Di sini: tidak ada demonstrasi.
Oke, sampai sekarang, seluruh penyimpanan lokal HTML5 juga selesai.
Terus meningkatkan blog ini
Disebutkan di atas bahwa Anda perlu menggunakan jahitan AJAX atau JS untuk menyelesaikan fungsi pemuatan di bawah ini saya memposting Ajax yang saya tulis!
Kode JS adalah sebagai berikut:
$ (function () {varility = array baru (); untuk (var i = 0; i <localstorage.length; i ++) {var key = localstorage.key (i); var localValue = localstorage. getItem (key) ; coool = obj .pcolor; //console.log (ID produk: + PID + Kuantitas Produk: + Num + Warna Produk: + Warna); = {Carry: carry}; data) {var arystr = array baru (); <span> (total ' + arystr [1] +', tanpa pengiriman) </span> ')});});Bagian pengontrol:
[Httppost] string publik getCarInfo (kamus <string, string> [] carary) {userCarmodel model = USerCarmodel baru (); ] [] Carry) {UserCarmodel Model = UserCarmodel baru ();Bagian Model
String publik getCarInfo (kamus <string, string> [] carary, int i = 0) {System.text.stringBuilder SB = System.textBuilder baru (); Muat keranjang belanja if (carry! = Null && length> 0) {sb.append (<ul>); string pcolor = item [pcolor]; '> <Div class =' thumb '> <img src =' + picpath + @ ' /> </div> <div class =' desc clear-bek Klasifikasi Warna Small>: + pcolor + @</small> <span> ￥ + convert.todouble (ProductMol.ShopPrice) .ToString (0,00) + @</span> <div class = 'Ctrl-div'> <Div Class = 'Jian'> </div> <div class = 'num'> + num + @</div> <div class = 'jia'> </div> </div> </div > </li>);} sb.append (</ul>);} else {sb.append (<ul> <li onClick = 'gobuy2 ()'> li> <br/> </ul>); }} Else {// Hitung jumlah total dan jumlah produk jika (carary! = Null && length> 0) {foreach (item var in carry) {string pid = item [pid]; ProductMol = bll.getModel (convert.toxt32 (pid)); Carry.length);} return sb.tostring ();}Peta efeknya adalah sebagai berikut:
Di atas adalah semua isi artikel ini.