HTML5 웹 저장소로 장바구니 만들기

게시 됨: 2022-03-10
빠른 요약 ↬ 이 튜토리얼에서는 장바구니를 단계별로 생성하여 HTML5 웹 스토리지의 기능을 활용하는 방법을 보여줍니다. 이 튜토리얼에서 배운 내용은 사용자 기본 설정, 사용자가 즐겨찾는 콘텐츠, 위시 리스트, 사용자 이름 및 비밀번호와 같은 사용자 설정 등과 같이 데이터베이스 저장소가 필요하지 않을 수 있는 다른 사이트 기능에 쉽게 적용할 수 있습니다.

업데이트(8월 27,29일) 편집자 주 : HTML의 접근성 문제를 해결하기 위해 예제를 업데이트했습니다.

HTML5의 출현으로 많은 사이트에서 JavaScript 플러그인 및 코드를 오디오, 비디오, 지리적 위치 등과 같은 간단하고 효율적인 HTML 코드로 대체할 수 있었습니다. HTML5 태그는 페이지 로드 시간과 사이트 성능을 향상시키면서 개발자의 작업을 훨씬 쉽게 만들었습니다. 특히 HTML5 웹 스토리지는 서버를 사용하지 않고도 사용자의 브라우저가 사용자 데이터를 저장할 수 있도록 하여 게임 체인저였습니다. 따라서 웹 저장소를 만들면 프런트 엔드 개발자가 서버 측 코딩이나 데이터베이스를 알지 못하거나 사용하지 않고도 웹 사이트에서 더 많은 작업을 수행할 수 있습니다.

온라인 전자 상거래 웹 사이트는 주로 PHP와 같은 서버 측 언어를 사용하여 사용자 데이터를 저장하고 한 페이지에서 다른 페이지로 전달합니다. Node.js와 같은 JavaScript 백엔드 프레임워크를 사용하여 동일한 목표를 달성할 수 있습니다. 그러나 이 자습서에서는 HTML5와 일부 사소한 JavaScript 코드로 장바구니를 만드는 방법을 단계별로 보여줍니다. 이 튜토리얼에서 기술의 다른 용도는 데이터베이스를 사용하지 않고 웹사이트와 기본 모바일 앱에 사용자 기본 설정, 사용자가 즐겨찾는 콘텐츠, 위시 리스트, 이름 및 비밀번호와 같은 사용자 설정을 저장하는 것입니다.

트래픽이 많은 웹 사이트는 성능과 가용성을 최적화하기 위해 서버 클러스터링, DNS 로드 밸런서, 클라이언트 측 및 서버 측 캐싱, 분산 데이터베이스, 마이크로서비스와 같은 복잡한 기술에 의존합니다. 실제로 동적 웹사이트의 주요 과제는 데이터베이스에서 데이터를 가져와 PHP와 같은 서버 측 언어를 사용하여 처리하는 것입니다. 그러나 원격 데이터베이스 저장소는 기사 및 사용자 자격 증명과 같은 필수 웹 사이트 콘텐츠에만 사용해야 합니다. 사용자 기본 설정과 같은 기능은 쿠키와 유사하게 사용자의 브라우저에 저장할 수 있습니다. 마찬가지로 기본 모바일 앱을 빌드할 때 HTML5 웹 저장소를 로컬 데이터베이스와 함께 사용하여 앱 속도를 높일 수 있습니다. 따라서 프론트 엔드 개발자로서 우리는 개발 초기 단계에서 애플리케이션에서 HTML5 웹 스토리지의 기능을 활용할 수 있는 방법을 모색해야 합니다.

저는 대규모 소셜 웹사이트를 개발하는 팀의 일원이었고 HTML5 웹 스토리지를 많이 사용했습니다. 예를 들어 사용자가 로그인할 때 해시된 사용자 ID를 HTML5 세션에 저장하고 보호된 페이지에서 사용자를 인증하는 데 사용합니다. 또한 이 기능을 사용하여 새 채팅 메시지, 웹사이트 메시지 및 새 피드와 같은 모든 새 푸시 알림을 저장하고 한 페이지에서 다른 페이지로 전달합니다. 소셜 웹사이트에 트래픽이 많이 발생하면 로드 밸런싱을 위한 서버에 대한 전체 의존도가 작동하지 않을 수 있으므로 서버가 아닌 사용자의 브라우저에서 처리할 수 있는 작업과 데이터를 식별해야 합니다.

점프 후 더! 아래에서 계속 읽기 ↓

프로젝트 배경

장바구니를 사용하면 웹사이트 방문자가 제품 페이지를 보고 장바구니에 항목을 추가할 수 있습니다. 방문자는 모든 항목을 검토하고 장바구니를 업데이트할 수 있습니다(예: 항목 추가 또는 제거). 이를 위해 웹사이트는 방문자의 데이터를 저장하고 방문자가 체크아웃 페이지로 이동하여 구매할 때까지 한 페이지에서 다른 페이지로 전달해야 합니다. 데이터 저장은 서버 측 언어 또는 클라이언트 측 언어를 통해 수행할 수 있습니다. 서버측 언어의 경우 서버가 데이터 저장소의 무게를 부담하는 반면 클라이언트측 언어의 경우 방문자의 컴퓨터(데스크톱, 태블릿 또는 스마트폰)가 데이터를 저장하고 처리합니다. 각 접근 방식에는 장단점이 있습니다. 이 자습서에서는 HTML5 및 JavaScript를 기반으로 하는 간단한 클라이언트 측 접근 방식에 중점을 둘 것입니다.

참고 : 이 튜토리얼을 따라하기 위해서는 HTML5, CSS, JavaScript에 대한 기본 지식이 필요합니다.

프로젝트 파일

프로젝트의 소스 파일을 다운로드하려면 여기를 클릭하십시오. 라이브 데모도 볼 수 있습니다.

HTML5 웹 저장소 개요

HTML5 웹 저장소를 사용하면 웹 애플리케이션이 쿠키처럼 브라우저 세션에서 살아남을 수 있는 값을 브라우저에 로컬로 저장할 수 있습니다. 모든 HTTP 요청과 함께 보내야 하는 쿠키와 달리 웹 저장소 데이터는 서버로 전송되지 않습니다. 따라서 웹 스토리지는 웹 성능에서 쿠키를 능가합니다. 또한 쿠키를 사용하면 도메인당 4KB의 데이터만 저장할 수 있지만 웹 스토리지는 도메인당 최소 5MB를 저장할 수 있습니다. 웹 스토리지는 키를 값에 매핑하는 단순한 배열처럼 작동하며 두 가지 유형이 있습니다.

  • 세션 저장
    이렇게 하면 브라우저 또는 브라우저 탭이 닫힐 때까지 사용할 수 있는 하나의 브라우저 세션에 데이터가 저장됩니다. 동일한 창에서 열리는 팝업 창은 세션 저장 공간을 볼 수 있으며 동일한 창 내의 iframe도 볼 수 있습니다. 그러나 동일한 출처(URL)의 여러 창은 서로의 세션 저장소를 볼 수 없습니다.
  • 로컬 스토리지
    이것은 만료 날짜 없이 웹 브라우저에 데이터를 저장합니다. 브라우저나 브라우저 탭을 다시 열거나 닫은 경우에도 동일한 출처(도메인)를 가진 모든 창에서 데이터를 사용할 수 있습니다.

두 가지 스토리지 유형 모두 현재 모든 주요 웹 브라우저에서 지원됩니다. 두 브라우저가 동일한 도메인을 방문하는 경우에도 한 브라우저에서 다른 브라우저로 스토리지 데이터를 전달할 수 없습니다.

기본 쇼핑 카트 만들기

장바구니를 만들기 위해 먼저 항목을 표시하는 간단한 장바구니와 장바구니를 추가하거나 편집할 수 있는 간단한 양식이 있는 HTML 페이지를 만듭니다. 그런 다음 HTML 웹 저장소를 추가하고 JavaScript 코딩을 추가합니다. HTML5 로컬 저장소 태그를 사용하고 있지만 모든 단계는 HTML5 세션 저장소와 동일하며 HTML5 세션 저장소 태그에 적용할 수 있습니다. 마지막으로 jQuery 사용에 관심이 있는 사람들을 위해 JavaScript 코드의 대안으로 jQuery 코드를 살펴보겠습니다.

장바구니에 HTML5 로컬 스토리지 추가

HTML 페이지는 헤드에서 참조되는 외부 JavaScript 및 CSS에 대한 태그가 있는 기본 페이지입니다.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

다음은 페이지 본문에 표시되는 HTML 콘텐츠입니다.

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

장바구니에 JavaScript 추가하기

브라우저 지원을 확인하고 스토리지 이름-값 쌍을 표시하는 테이블을 동적으로 생성하기 위해 onload() 이벤트에서 JavaScript 함수 doShowAll() 을 만들고 호출합니다.

 <body onload="doShowAll()">

또는 JavaScript 코드에 다음을 추가하여 JavaScript onload 이벤트를 사용할 수 있습니다.

 window.load=doShowAll();

또는 jQuery에 이것을 사용하십시오.

 $( window ).load(function() { doShowAll(); });

CheckBrowser() 함수에서 브라우저가 HTML5 스토리지를 지원하는지 확인하고 싶습니다. 대부분의 최신 웹 브라우저에서 지원하므로 이 단계가 필요하지 않을 수 있습니다.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

doShowAll() CheckBrowser() 함수가 브라우저 지원을 먼저 평가하면 페이지 로드 중에 쇼핑 목록에 대한 테이블을 동적으로 생성합니다. 아래와 같이 JavaScript 루프 내부의 로컬 저장소에 저장된 키-값 쌍의 키(속성 이름)를 반복할 수 있습니다. 스토리지 값을 기반으로 이 메서드는 테이블을 동적으로 채워 로컬 스토리지에 저장된 키-값 쌍을 표시합니다.

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

참고 : 귀하 또는 귀하의 프레임워크는 새 DOM 노드를 만들고 이벤트를 처리하는 데 선호하는 방법을 갖게 됩니다. 일을 명확하고 집중적으로 유지하기 위해 우리의 예제에서는 일반적으로 프로덕션 코드에서 사용하지 않는 경우에도 .innerHTML 및 인라인 이벤트 핸들러를 사용합니다.

팁: jQuery를 사용하여 데이터를 바인딩하려면 document.getElementById('list').innerHTML = list; $ ( $('#list').html()=list; .

장바구니 실행 및 테스트

이전 두 섹션에서 HTML 헤드에 코드를 추가하고 장바구니 양식과 장바구니에 HTML을 추가했습니다. 또한 브라우저 지원을 확인하고 장바구니에 항목을 채우는 JavaScript 기능을 만들었습니다. 장바구니 항목을 채울 때 JavaScript는 데이터베이스 대신 HTML 웹 저장소에서 값을 가져옵니다. 이 부분에서는 데이터가 HTML5 스토리지 엔진에 삽입되는 방법을 보여줍니다. 즉, JavaScript와 함께 HTML5 로컬 저장소를 사용하여 장바구니에 새 항목을 삽입하고 장바구니에 있는 기존 항목을 편집합니다.

참고 : JavaScript 코드의 대안으로 jQuery 코드를 표시하기 위해 아래에 팁 섹션을 추가했습니다.

사용자 입력 및 제출을 캡처하기 위해 별도의 HTML div 요소를 만듭니다. 버튼에 대한 onClick 이벤트에 해당 JavaScript 함수를 첨부합니다.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

일반 JavaScript 객체와 유사한 localStorage 객체의 속성을 설정할 수 있습니다. 다음은 로컬 스토리지 속성 myProperty 를 myValue 값으로 설정하는 방법의 예입니다.

 localStorage.myProperty="myValue";

다음과 같이 로컬 저장소 속성을 삭제할 수 있습니다.

 delete localStorage.myProperty;

또는 다음 방법을 사용하여 로컬 저장소에 액세스할 수 있습니다.

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

키-값 쌍을 저장하려면 해당 JavaScript 객체의 값을 가져오고 setItem 메서드를 호출합니다.

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

다음은 SaveItem 함수에 대한 jQuery 대안입니다. 먼저 양식 입력에 ID를 추가합니다.

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

그런 다음 ID별로 양식 입력을 선택하고 값을 가져옵니다. 아래에서 볼 수 있듯이 JavaScript보다 훨씬 간단합니다.

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

장바구니의 항목을 업데이트하려면 먼저 해당 항목의 키가 이미 로컬 저장소에 있는지 확인한 다음 아래와 같이 값을 업데이트해야 합니다.

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

아래는 jQuery 대안을 보여줍니다.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

removeItem 메서드를 사용하여 저장소에서 항목을 삭제합니다.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

팁: 이전 두 함수와 유사하게 RemoveItem 함수 에서 jQuery 선택기를 사용할 수 있습니다 .

전체 로컬 저장소를 지울 수 있는 또 다른 로컬 저장소 방법이 있습니다. "Clear" 버튼의 onClick 이벤트에서 ClearAll() 함수를 호출합니다.

 <input type="button" value="Clear">

아래와 같이 clear 메서드를 사용하여 로컬 저장소를 지웁니다.

 function ClearAll() { localStorage.clear(); doShowAll(); }

세션 스토리지

sessionStorage 객체는 localStorage 와 같은 방식으로 작동합니다. 위의 예를 sessionStorage 객체로 교체하여 한 세션 후에 데이터를 만료시킬 수 있습니다. 사용자가 브라우저 창을 닫으면 저장 공간이 지워집니다. 간단히 말해서 localStorage 및 sessionStorage 용 API는 동일하므로 다음 방법을 사용할 수 있습니다.

  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • clear()
  • key(index)
  • length

배열 및 개체가 있는 쇼핑 카트

HTML5 웹 저장소는 단일 이름-값 저장소만 지원하므로 배열이나 객체를 단일 문자열로 변환하려면 JSON 또는 다른 방법을 사용해야 합니다. 항목의 범주 및 하위 범주가 있거나 고객 정보, 항목 정보 등과 같은 여러 데이터가 포함된 장바구니가 있는 경우 배열 또는 개체가 필요할 수 있습니다. 배열 또는 개체 항목을 문자열로 분해하기만 하면 됩니다. 웹 스토리지에 저장한 다음 배열로 다시 분해(또는 분할)하여 다른 페이지에 표시합니다. 고객 정보, 품목 정보 및 사용자 지정 우편 주소의 세 가지 정보 세트가 있는 장바구니의 기본 예를 살펴보겠습니다. 먼저 JSON.stringify를 사용하여 객체를 문자열로 변환합니다. 그런 다음 JSON.parse를 사용하여 되돌립니다.

힌트 : 키 이름은 각 도메인에 대해 고유해야 합니다.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

요약

이 튜토리얼에서는 HTML5 웹 스토리지와 JavaScript를 사용하여 장바구니를 단계별로 구축하는 방법을 배웠습니다. JavaScript의 대안으로 jQuery를 사용하는 방법을 살펴보았습니다. 또한 쇼핑 카트의 배열 및 개체를 처리하기 위한 문자열화 및 구문 분석과 같은 JSON 기능에 대해 논의했습니다. JavaScript 다차원 배열에 데이터를 저장하는 동안 제품 범주 및 하위 범주를 추가하는 것과 같은 기능을 더 추가하여 이 튜토리얼을 기반으로 구축할 수 있습니다. 또한 전체 JavaScript 코드를 jQuery로 바꿀 수 있습니다.

우리는 개발자가 HTML5 웹 저장소로 수행할 수 있는 다른 작업과 웹사이트에 추가할 수 있는 기타 기능을 살펴보았습니다. 예를 들어, 이 튜토리얼을 사용하여 데이터베이스를 사용하지 않고 웹사이트 및 기본 모바일 앱에 사용자 기본 설정, 즐겨찾기 콘텐츠, 위시 리스트, 이름 및 비밀번호와 같은 사용자 설정을 저장할 수 있습니다.

결론적으로 HTML5 웹 저장소를 구현할 때 고려해야 할 몇 가지 문제는 다음과 같습니다.

  • 일부 사용자는 브라우저에서 데이터를 저장하지 못하도록 하는 개인 정보 설정이 있을 수 있습니다.
  • 일부 사용자는 시크릿 모드에서 브라우저를 사용할 수 있습니다.
  • DNS 스푸핑 공격, 디렉토리 간 공격 및 민감한 데이터 손상과 같은 몇 가지 보안 문제에 유의하십시오.

관련 읽을거리

  • "브라우저 저장소 제한 및 제거 기준", MDN 웹 문서, Mozilla
  • "웹 스토리지", HTML 리빙 스탠다드,
  • WHATWG 블로그 "이번 주 HTML 5"