HTMLでのデータストア

Web Storageとは
HTML 5には、canvas要素の追加に加えて、クライアントにデータをローカルに保存できるWebStorage機能が追加されています.Webアプリケーションの発展により、クライアントストレージ機能の使用はますます多くなり、クライアントストレージを実現する方法は多種多様である.最も簡単で互換性の良い方法はcookiesであり、単数を本当のクライアントストレージとして使用することです.名前の通りWebStorage機能は、Web上にデータを格納する機能であり、ここでの格納は、クライアントのローカルに対するものである.
sessionStorageメソッド
セッションオブジェクトにデータを保存します.セッションとは,ユーザがあるサイトを閲覧する際に,サイトにアクセスしてからブラウザが閉じるまでの時間,すなわち,このサイトを閲覧するのにかかるイベントである.sessionオブジェクトは、この間に保存するデータを保存するために使用できます.
localStroageメソッド
クライアントのローカルハードウェアデバイスにデータを保存し、ブラウザを閉じてもデータが変更されても、次回ブラウザを開いてWebサイトにアクセスしても使用できます.この2つの異なるストレージタイプの違いは、sessionStorageが一時的なストレージであり、localstooageが永続的なストレージであることです.
二WebStorageのAPIの使用
API
説明
length
現在のWebStorageの数を取得
key
WebStorageのN番目のストレージエントリを返します.
getItem(key)
指定したkeyの格納内容を返し、存在しない場合nullを返します.文字列タイプが返されます.
setItem(key,value)
指定したkeyの内容の値をvalueに設定
removeItem(key)
指定したキーに基づいてキー値がキーの内容を削除
clear
WebStorageの内容をクリア
次に、ページ文字の拡大縮小と色の変更を実現します.
1.シンプルなレイアウト(ページストレージの実装を想定)

2.jqの作成によるデータストレージの実現

			
	$(function(){
		var num = localStorage.getItem("bigSize") || 16
		var color = localStorage.getItem("fontColor") || "black"
		$(".section").css("font-size",num+"px")
		$(".section p").css("color",color)
		$(".big").click(function(){
			num++
//			console.log(num)
			if(num>20){
				return
		}
					
		$(".section").css("font-size",num+"px")
			localStorage.setItem("bigSize",num)
		})
				
		$(".small").click(function(){
			num--
			if(num<12){
			num=12
			localStorage.setItem("bigSize",num)
		}
		$(".section").css("font-size",num+"px")
			localStorage.setItem("bigSize",num)
		})
				
		$(".bgcolor").click(function(){
			var color = $(this).data("color")
//			console.log(color)
		$(".section p").css("color",color)
		})
				
})			
			

要点:localStorageでキー値ペアを設定しsettItem()を適用
localStorage.setItem("key","value")
localStorageでデータを取得するにはgetItem()を使用します.
var val = localStroage.getItem("key")
もちろん、setItem()とgetItem()ではなく、localStorageのkeyメソッドを直接使用することもできます.コードは次のとおりです.
localStroage.key = "value"var val = localStroage.key
この方法でクライアントのローカルデバイスにデータを保存でき、ブラウザを閉じても変更データは存在し、次回ブラウザを開いてWebサイトにアクセスしても使用できます.