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

초급 수준 로컬 저장소 예시

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

    
    
    



    Choose a theme:
    
        Light
        Dark
        Medium
    
    Save Preference

    

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

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

    
    
    



    
    Save Input

    

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

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

삼. 장바구니 지속성:

    
    
    



    
Shopping Cart
    

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

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

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

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