웹 개발에서 로컬 저장소 마스터하기-CSS 튜토리얼-php.cn

웹 개발에서 로컬 저장소 마스터하기

王林

풀어 주다： 2024-07-24 15:26:50

원래의

578명이 탐색했습니다.

Mastering Local Storage in Web Development

로컬 스토리지는 개발자가 사용자의 브라우저 내에 데이터를 저장할 수 있는 유용한 웹 개발 도구입니다. 이 기사에서는 초보자 수준의 예제부터 시작하여 더욱 복잡한 기술까지 계속해서 로컬 스토리지의 다양한 기능을 살펴보겠습니다. 이 가이드를 마치면 웹 애플리케이션에서 로컬 저장소를 성공적으로 사용하는 방법에 대한 기본적인 이해를 갖추게 됩니다.

초급 로컬 스토리지 예시

1. 사용자 기본 설정 저장 :

<!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>

로그인 후 복사

사용자가 테마를 선택하고 '기본 설정 저장' 버튼을 누르면 이 코드는 테마를 콘솔에 기록합니다. 이 로그를 읽으려면 브라우저의 개발자 도구를 열고(일반적으로 F12를 누르거나 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택) 콘솔 탭으로 이동하세요.(자세히 알아보기)

2. 사용자 입력 기억하기 :

<!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>

로그인 후 복사

이 HTML 예제는 사용자가 텍스트 필드에 텍스트를 입력하고 이를 브라우저의 로컬 저장소에 저장할 수 있는 간단한 웹페이지를 생성합니다.

사용자가 입력 상자에 텍스트를 입력하고 '입력 저장' 버튼을 누르면 해당 텍스트가 브라우저의 로컬 저장소에 저장됩니다. 이는 사용자가 웹사이트를 새로 고치거나 브라우저를 닫았다가 다시 열더라도 저장된 입력에 계속 액세스할 수 있음을 의미합니다. 콘솔 로그 및 경고는 입력이 성공적으로 저장되었음을 사용자에게 알립니다. (자세히 보기)

3. 장바구니 지속성 :

<!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>

로그인 후 복사

이 예에서는 로컬 저장소를 사용하여 장바구니를 저장하는 방법을 보여줍니다. 장바구니에 추가된 항목은 'cart' 키 아래 로컬 저장소에 배열로 저장됩니다. 페이지가 로드되면 저장된 장바구니 항목이 로컬 저장소에서 가져와 표시됩니다.

'장바구니에 항목 X 추가' 버튼 중 하나를 클릭하면 해당 항목이 장바구니에 추가되고 업데이트된 장바구니 내용이 콘솔에 표시됩니다. 이러한 로그를 검사하려면 브라우저의 개발자 도구를 열고(일반적으로 F12를 누르거나 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사' 선택) 콘솔 탭으로 이동하세요.

브라우저의 개발자 도구를 통해서도 로컬 저장소를 직접 볼 수도 있습니다. 대부분의 브라우저에서는 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하여 개발자 도구를 가져온 다음 "응용 프로그램" 또는 "저장소" 탭으로 이동하여 이 작업을 수행할 수 있습니다. 거기에서 "로컬 저장소" 섹션을 확장하여 웹사이트의 키-값 쌍을 확인하세요. 이 예에서 키 "cart"에는 저장된 장바구니 항목을 나타내는 JSON 문자열이 포함됩니다.
전체 기사 읽기 - 웹 개발에서 로컬 스토리지 마스터하기: 초보자부터 전문가까지 8가지 실제 사례!

Json 알아보기- 여기를 클릭하세요

위 내용은 웹 개발에서 로컬 저장소 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!