Menguasai Storan Tempatan dalam Pembangunan Web-tutorial css-php.cn

Menguasai Storan Tempatan dalam Pembangunan Web

王林

Lepaskan： 2024-07-24 15:26:50

asal

557 orang telah melayarinya

Mastering Local Storage in Web Development

Storan tempatan ialah alat pembangunan web yang berguna yang membolehkan pembangun menyimpan data dalam penyemak imbas pengguna. Dalam artikel ini, kita akan melihat ciri storan tempatan yang berbeza, bermula dengan contoh peringkat pemula dan meneruskan kepada teknik yang lebih kompleks. Pada penghujung panduan ini, anda akan mempunyai pemahaman asas tentang cara menggunakan storan setempat dalam aplikasi web dengan jayanya.

Contoh peringkat pemula pada storan Setempat

1. Menyimpan Keutamaan Pengguna :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Preferences</title>
</head>

<body>
    <label for="theme">Choose a theme:</label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="medium">Medium</option>
    </select>
    <button onclick="savePreference()">Save Preference</button>

    <script>
        function savePreference() {
            const selectedTheme = document.getElementById('theme').value;
            localStorage.setItem('theme', selectedTheme);
            console.log('Preference saved:', selectedTheme);
            alert('Preference saved!' + " " + selectedTheme);
        }
    </script>
</body>

</html>

Salin selepas log masuk

Apabila pengguna memilih tema dan menekan butang "Simpan Keutamaan", kod ini log tema ke konsol. Untuk membaca log ini, buka alat pembangun penyemak imbas (biasanya dengan menekan F12 atau mengklik kanan pada halaman dan memilih "Periksa") dan pergi ke tab konsol.(Baca Lagi)

2. Mengingati Input Pengguna :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remember User Input</title>
</head>

<body>
    <input type="text" id="userInput">
    <button onclick="saveInput()">Save Input</button>

    <script>
        function saveInput() {
            const userInput = document.getElementById('userInput').value;
            localStorage.setItem('savedInput', userInput);
            console.log(userInput + " " + 'saved !');
            alert('Input saved!');
        }
    </script>
</body>

</html>

Salin selepas log masuk

Contoh HTML ini menghasilkan halaman web ringkas yang membolehkan pengguna memasukkan teks ke dalam medan teks dan menyimpannya ke storan setempat penyemak imbas mereka.

Apabila pengguna menaip teks ke dalam kotak input dan menekan butang "Simpan Input", teks itu disimpan dalam storan setempat penyemak imbas. Ini membayangkan bahawa walaupun pengguna memuat semula tapak web atau menutup dan membuka semula penyemak imbas, input yang disimpan akan kekal boleh diakses. Log konsol dan makluman memberitahu pengguna bahawa input mereka telah berjaya disimpan. (Baca Lagi)

3. Kegigihan Troli Beli-belah :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
</head>

<body>
    <h1>Shopping Cart</h1>
    <ul id="cartItems"></ul>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
            const cartItemsElement = document.getElementById('cartItems');

            savedCart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                cartItemsElement.appendChild(li);
            });
            console.log('Saved cart items:', savedCart);
        });

        function addToCart(item) {
            const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
            savedCart.push(item);
            localStorage.setItem('cart', JSON.stringify(savedCart));
            console.log('Added', item, 'to cart');
            location.reload(); // Refresh the page to reflect changes
        }
    </script>

    <button onclick="addToCart('Item 1')">Add Item 1 to Cart</button>
    <button onclick="addToCart('Item 2')">Add Item 2 to Cart</button>
    <button onclick="addToCart('Item 3')">Add Item 3 to Cart</button>
</body>

</html>

Salin selepas log masuk

Contoh ini menunjukkan cara menyimpan troli beli-belah menggunakan storan tempatan. Item yang ditambahkan pada troli disimpan sebagai tatasusunan dalam storan setempat di bawah kekunci 'troli'. Apabila halaman dimuatkan, item troli yang disimpan akan ditarik dari storan setempat dan ditunjukkan.

Apabila anda mengklik salah satu butang "Tambah Item X ke Troli", item yang sesuai ditambahkan pada troli beli-belah dan kandungan troli yang dikemas kini dipaparkan dalam konsol. Untuk memeriksa log ini, buka alat pembangun penyemak imbas (biasanya dengan menekan F12 atau mengklik kanan pada halaman dan memilih "Periksa") dan pergi ke tab konsol.

Anda juga boleh melihat storan setempat secara terus melalui alat pembangun penyemak imbas. Kebanyakan penyemak imbas membenarkan anda melakukan ini dengan mengklik kanan pada halaman, memilih "Periksa" untuk mendapatkan alat pembangun, dan kemudian menavigasi ke tab "Aplikasi" atau "Storan". Dari sana, kembangkan bahagian "Storan Tempatan" untuk melihat pasangan nilai kunci tapak web. Dalam contoh ini, kunci "troli" termasuk rentetan JSON yang mewakili item troli yang disimpan.
Baca artikel penuh - Menguasai Storan Tempatan dalam Pembangunan Web: 8 Contoh Praktikal, Daripada Novis kepada Pakar!

Belajar Json- Klik Di Sini

Atas ialah kandungan terperinci Menguasai Storan Tempatan dalam Pembangunan Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!