Penyimpanan lokal keranjang belanja javascript

Di blog ini, saya menunjukkan cara menggunakan fitur localStorage dari HTML5 untuk menyimpan Cart sehingga ketika pengguna kembali ke halaman Cart, kami memuat Cart dari localStorage untuk menyimpan data cart di seluruh permintaan halaman. Ini adalah aplikasi satu halaman tempat gerobak disimpan sebagai larik JavaScript. Jika kami tidak menyimpan data keranjang di penyimpanan lokal, pengguna akan kehilangan data keranjang setiap kali dia me-refresh halaman karena larik JavaScript hilang setiap kali halaman pengguna dimuat. Saya menggunakan halaman HTML sederhana dengan fitur JavaScript, jQuery dan localStorage dari HTML5 untuk mendemonstrasikan cara memelihara Keranjang dan mengembalikannya saat kita kembali ke halaman. Penyimpanan Lokal adalah salah satu opsi yang disediakan oleh HTML5 di bawah kategori Penyimpanan Web. Dapatkan informasi lebih lanjut tentang Penyimpanan Web di sini.

Muat troli dari Penyimpanan Lokal

Kode berikut menunjukkan cara memuat data keranjang dari penyimpanan lokal di acara siap dokumen jQuery.

        var cart = [];  
        $(function () {
            if (localStorage.cart)
            {
                // load cart data from local storage
                cart = JSON.parse(localStorage.cart);  
                showCart();  // display cart that is loaded into cart array
            }
        });

Kode di atas memeriksa apakah key cart tersedia di objek localStorage. Objek localStorage mewakili fitur Penyimpanan Lokal dari HTML5 dan menyimpan data dalam bentuk kunci dan nilai. JSON. parse(string) digunakan untuk mengonversi bentuk string keranjang menjadi larik objek JavaScript

Tambahkan Barang ke Troli

Kode berikut menambahkan item bersama dengan jumlah yang dipilih ke troli. Setiap item dalam keranjang adalah objek JavaScript dengan Nama, Harga, dan Jumlah sebagai properti. Pada akhir penambahan item ke troli, ini akan menampilkan troli dan juga menyimpannya ke penyimpanan lokal. Fungsi saveCart() digunakan untuk menyimpan keranjang (array objek JavaScript) ke penyimpanan lokal.

        function addToCart() {
            var price = $("#products").val();  // get selected product's price
            var name = $("#products option:selected").text();  // get product name
            var qty = $("#qty").val();  // get quantity

            // update Qty if product is already present
            for (var i in cart) {
                if(cart[i].Product == name)
                {
                    cart[i].Qty = qty;  // replace existing Qty
                    showCart();
                    saveCart();
                    return;
                }
            }

            var item = { Product: name,  Price: price, Qty: qty };
            cart.push(item);
            saveCart();
            showCart();
        }

Menyimpan Keranjang ke Penyimpanan Lokal

Kode berikut digunakan untuk menyimpan keranjang ke penyimpanan lokal. Jika objek localStorage tidak ditemukan di objek windows maka itu tidak melakukan apa-apa karena itu berarti browser Anda tidak mendukung fitur Penyimpanan Lokal. JSON. stringify(object) digunakan untuk mengonversi array objek JavaScript (cart) menjadi string JSON sebelum disimpan ke localStorage.

        function saveCart() {
            if (window.localStorage)
            {
                localStorage.cart = JSON.stringify(cart);
            }
        }

Menampilkan Keranjang

Kode di bawah menampilkan objek gerobak dalam bentuk tabel. Hal ini memungkinkan pengguna untuk menghapus item dengan mengklik tombol Hapus.

         function showCart() {
            if (cart.length == 0) {
                $("#cart").css("visibility", "hidden"); // hide table that shows cart
                return;
            }

            $("#cart").css("visibility", "visible");
            $("#cartBody").empty();  // empty tbody of table 
            for (var i in cart) {
                var item = cart[i];
                var row = "" + item.Product + "" +
                       item.Price + "" + item.Qty + ""
                       + item.Qty * item.Price + ""
                       + "Delete";
                $("#cartBody").append(row);
            }
        }

HTML

HTML berikut menunjukkan kotak daftar dropdown item dan kotak teks untuk kuantitas. Pilih item di dropdown, masukkan jumlah dan klik tombol Add To Cart untuk menambahkan item ke keranjang.

Cart

Select Product : Quantity :

Add To Cart

Table of Contents Show

Muat troli dari Penyimpanan Lokal
Tambahkan Barang ke Troli
Menyimpan Keranjang ke Penyimpanan Lokal
Menampilkan Keranjang
Kode Sumber Lengkap
Bagaimana cara menyimpan item keranjang belanja di localStorage?
Bisakah JavaScript mengakses penyimpanan lokal?
Bagaimana cara membuat keranjang belanja menggunakan JavaScript?
Objek JavaScript mana yang dapat menyimpan data secara lokal?

Product Price Qty Total

Kode Sumber Lengkap

Inilah sumber lengkap dari contoh ini.

Shopping Cart

Cart

Select Product : Quantity

Add To Cart

Product Price Qty Total

Bagaimana cara menyimpan item keranjang belanja di localStorage?

Dalam kuliah ini kami menggunakan Objek JS untuk menyimpan item keranjang seperti ini. .

if (id dalam keranjang) { keranjang[id]. jumlah++; . judul, harga. harga, jumlah. 1 }; .

penyimpanan lokal. setItem("keranjang", JSON. merangkai(gerobak));

Bisakah JavaScript mengakses penyimpanan lokal?

Mekanisme localStorage menyediakan jenis objek penyimpanan web yang memungkinkan Anda menyimpan dan mengambil data di browser. Anda dapat menyimpan dan mengakses data tanpa kedaluwarsa; . Biasanya Anda akan mengakses localStorage menggunakan JavaScript .