HTML5Webストレージを使用したショッピングカートの作成

公開: 2022-03-10

クイックサマリー↬このチュートリアルでは、ショッピングカートを作成することにより、HTML5Webストレージの機能を活用する方法を段階的に説明します。このチュートリアルで学んだことは、ユーザー設定、ユーザーのお気に入りのコンテンツ、ウィッシュリスト、ユーザー名やパスワードなどのユーザー設定など、データベースストレージを必要としない他のサイト機能に簡単に適用できます。

更新（8月27、29日）編集者注：HTMLのアクセシビリティの問題に対処するために、例を更新しました。

HTML5の登場により、多くのサイトでJavaScriptプラグインとコードを、オーディオ、ビデオ、ジオロケーションなどの単純でより効率的なHTMLコードに置き換えることができました。HTML5タグにより、開発者の作業がはるかに簡単になり、ページの読み込み時間とサイトのパフォーマンスが向上しました。特に、HTML5 Webストレージは、ユーザーのブラウザーがサーバーを使用せずにユーザーデータを保存できるようにするため、ゲームチェンジャーでした。そのため、Webストレージを作成することで、フロントエンド開発者は、サーバー側のコーディングやデータベースを知らなくても、使用しなくても、Webサイトでより多くのことを達成できるようになりました。

オンラインeコマースWebサイトは、主にPHPなどのサーバー側言語を使用してユーザーのデータを保存し、あるページから別のページにデータを渡します。 Node.jsなどのJavaScriptバックエンドフレームワークを使用して、同じ目標を達成できます。ただし、このチュートリアルでは、HTML5といくつかのマイナーなJavaScriptコードを使用してショッピングカートを作成する方法を段階的に説明します。このチュートリアルのテクニックの他の使用法は、データベースを使用せずに、ユーザー設定、ユーザーのお気に入りのコンテンツ、ウィッシュリスト、および名前やパスワードなどのユーザー設定をWebサイトやネイティブモバイルアプリに保存することです。

多くのトラフィックの多いWebサイトは、サーバークラスタリング、DNSロードバランサー、クライアント側とサーバー側のキャッシング、分散データベース、マイクロサービスなどの複雑な手法に依存して、パフォーマンスと可用性を最適化します。実際、動的Webサイトの主な課題は、データベースからデータをフェッチし、PHPなどのサーバー側言語を使用してデータを処理することです。ただし、リモートデータベースストレージは、記事やユーザーの資格情報など、重要なWebサイトコンテンツにのみ使用する必要があります。ユーザー設定などの機能は、Cookieと同様に、ユーザーのブラウザに保存できます。同様に、ネイティブモバイルアプリを作成する場合は、HTML5 Webストレージをローカルデータベースと組み合わせて使用して、アプリの速度を上げることができます。したがって、フロントエンド開発者として、開発の初期段階でアプリケーションのHTML5Webストレージの能力を活用する方法を模索する必要があります。

私は大規模なソーシャルWebサイトを開発するチームの一員であり、HTML5Webストレージを多用しました。たとえば、ユーザーがログインすると、ハッシュ化されたユーザーIDがHTML5セッションに保存され、保護されたページでユーザーを認証するために使用されます。また、この機能を使用して、新しいチャットメッセージ、Webサイトメッセージ、新しいフィードなどのすべての新しいプッシュ通知を保存し、それらを1つのページから別のページに渡します。ソーシャルWebサイトのトラフィックが多い場合、負荷分散をサーバーに完全に依存できない可能性があるため、サーバーではなくユーザーのブラウザーで処理できるタスクとデータを特定する必要があります。

ジャンプした後もっと！以下を読み続けてください↓

プロジェクトの背景

ショッピングカートを使用すると、Webサイトの訪問者は、製品ページを表示したり、バスケットにアイテムを追加したりできます。訪問者は、すべてのアイテムを確認し、バスケットを更新できます（アイテムの追加や削除など）。これを実現するには、訪問者がチェックアウトページにアクセスして購入するまで、Webサイトに訪問者のデータを保存し、あるページから別のページに渡す必要があります。データの保存は、サーバー側の言語またはクライアント側の言語を介して実行できます。サーバー側の言語では、サーバーがデータストレージの重みを負担しますが、クライアント側の言語では、訪問者のコンピューター（デスクトップ、タブレット、またはスマートフォン）がデータを保存および処理します。それぞれのアプローチには長所と短所があります。このチュートリアルでは、HTML5とJavaScriptに基づく単純なクライアント側のアプローチに焦点を当てます。

注：このチュートリアルに従うには、HTML5、CSS、およびJavaScriptの基本的な知識が必要です。

プロジェクトファイル

プロジェクトのソースファイルをダウンロードするには、ここをクリックしてください。ライブデモもご覧いただけます。

HTML5Webストレージの概要

HTML5 Webストレージを使用すると、Webアプリケーションは、Cookieと同様に、ブラウザーセッション後も存続できる値をブラウザーにローカルに保存できます。すべてのHTTPリクエストで送信する必要があるCookieとは異なり、Webストレージデータがサーバーに転送されることはありません。したがって、WebストレージはWebパフォーマンスにおいてCookieよりも優れています。さらに、Cookieではドメインごとに4 KBのデータしか保存できませんが、Webストレージではドメインごとに少なくとも5MBを保存できます。 Webストレージは単純な配列のように機能し、キーを値にマッピングします。これらには2つのタイプがあります。

セッションストレージ
これにより、データが1つのブラウザセッションに保存され、ブラウザまたはブラウザタブが閉じられるまでデータが利用可能になります。同じウィンドウから開いたポップアップウィンドウはセッションストレージを見ることができ、同じウィンドウ内のiframeも見ることができます。ただし、同じオリジン（URL）の複数のウィンドウは、互いのセッションストレージを認識できません。
ローカルストレージ
これにより、有効期限なしでWebブラウザにデータが保存されます。ブラウザまたはブラウザタブを再度開いたり閉じたりしても、同じオリジン（ドメイン）のすべてのウィンドウでデータを利用できます。

現在、両方のストレージタイプがすべての主要なWebブラウザでサポートされています。両方のブラウザが同じドメインにアクセスしている場合でも、あるブラウザから別のブラウザにストレージデータを渡すことはできないことに注意してください。

基本的なショッピングカートを作成する

ショッピングカートを作成するには、まず、アイテムを表示するための単純なカートと、バスケットを追加または編集するための単純なフォームを含むHTMLページを作成します。次に、HTML Webストレージを追加し、続いて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コードにこれを追加してJavaScriptonloadイベントを使用することもできます。

 window.load=doShowAll();

または、jQueryにこれを使用します。

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

CheckBrowser()関数で、ブラウザがHTML5ストレージをサポートしているかどうかを確認します。最近のほとんどのWebブラウザーはこの手順をサポートしているため、この手順は必要ない場合があることに注意してください。

 /* =====> 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;使用します。。

ショッピングカートを実行してテストする

前の2つのセクションでは、HTMLヘッドにコードを追加し、ショッピングカートのフォームとバスケットにHTMLを追加しました。また、ブラウザのサポートを確認し、バスケットにカート内のアイテムを入れるためのJavaScript関数を作成しました。バスケットアイテムにデータを入力する際、JavaScriptはデータベースではなくHTMLWebストレージから値をフェッチします。このパートでは、データがHTML5ストレージエンジンにどのように挿入されるかを示します。つまり、HTML5ローカルストレージをJavaScriptと組み合わせて使用して、新しいアイテムをショッピングカートに挿入したり、カート内の既存のアイテムを編集したりします。

注： JavaScriptの代わりに、jQueryコードを表示するためのヒントセクションを以下に追加しました。

ユーザーの入力と送信をキャプチャするために、個別の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(); }

ヒント：前の2つの関数と同様に、 RemoveItem関数でjQueryセレクターを使用できます。

ローカルストレージ全体をクリアできるローカルストレージの別の方法があります。「クリア」ボタンのonClickイベントでClearAll()関数を呼び出します。

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

以下に示すように、 clearメソッドを使用してローカルストレージをクリアします。

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

セッションストレージ

sessionStorageオブジェクトはlocalStorageと同じように機能します。上記の例をsessionStorageオブジェクトに置き換えて、1回のセッション後にデータを期限切れにすることができます。ユーザーがブラウザウィンドウを閉じると、ストレージがクリアされます。つまり、 localStorageとsessionStorageのAPIは同一であり、次のメソッドを使用できます。

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

配列とオブジェクトを備えたショッピングカート

HTML5 Webストレージは単一の名前と値のストレージのみをサポートするため、配列またはオブジェクトを単一の文字列に変換するには、JSONまたは別のメソッドを使用する必要があります。アイテムのカテゴリとサブカテゴリがある場合、または顧客情報やアイテム情報などの複数のデータを含むショッピングカートがある場合は、配列またはオブジェクトが必要になることがあります。配列またはオブジェクトのアイテムを文字列に変換するだけで済みます。それらをWebストレージに保存してから、それらを分解（または分割）して配列に戻し、別のページに表示します。顧客情報、商品情報、カスタム郵送先住所の3つの情報セットを持つショッピングカートの基本的な例を見てみましょう。まず、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 WebストレージとJavaScriptを使用して、ショッピングカートを段階的に作成する方法を学びました。 JavaScriptの代わりにjQueryを使用する方法を見てきました。また、ショッピングカート内の配列やオブジェクトを処理するためのstringifyやparseなどのJSON関数についても説明しました。このチュートリアルに基づいて、JavaScriptの多次元配列にデータを格納しながら製品カテゴリやサブカテゴリを追加するなどの機能を追加できます。さらに、JavaScriptコード全体をjQueryに置き換えることができます。

開発者がHTML5Webストレージで他に何を達成できるか、そして開発者がWebサイトに追加できる他の機能について見てきました。たとえば、このチュートリアルを使用すると、データベースを使用せずに、ユーザー設定、お気に入りのコンテンツ、ウィッシュリスト、および名前やパスワードなどのユーザー設定をWebサイトやネイティブモバイルアプリに保存できます。

結論として、HTML5Webストレージを実装する際に考慮すべきいくつかの問題があります。

一部のユーザーは、ブラウザがデータを保存できないようにするプライバシー設定を持っている場合があります。
一部のユーザーは、ブラウザをシークレットモードで使用する場合があります。
DNSスプーフィング攻撃、クロスディレクトリ攻撃、機密データの侵害など、いくつかのセキュリティ問題に注意してください。