JavaScript localStorage:คู่มือ

เว็บแอปพลิเคชันอาจซับซ้อนได้เร็วมาก สิ่งหนึ่งที่ฉันได้เรียนรู้ในช่วงที่เป็นนักพัฒนาซอฟต์แวร์คือ มีหลายอย่างที่คุณสามารถทำได้ด้วย JavaScript แบบเก่าธรรมดา หากคุณให้โอกาส

localStorage API เป็นฟังก์ชันในตัวที่มีประสิทธิภาพซึ่งช่วยลดความจำเป็นในการใช้ฐานข้อมูลสำหรับแอปพลิเคชันง่ายๆ ที่ไม่ต้องการเซิร์ฟเวอร์ เราสามารถใช้ API นี้เพื่อบันทึกข้อมูลบางส่วนในเครื่องซึ่งแอปพลิเคชันของเราสามารถเข้าถึงได้

ในคู่มือนี้ เราจะพูดถึงวิธีการใช้ localStorage ใน JavaScript เราจะยกตัวอย่างวิธีการใช้ localStorage เพื่อบันทึกเนื้อหาของแบบฟอร์มสำหรับภายหลังบนหน้าเว็บ เริ่มกันเลย!

localStorage คืออะไร

localStorage เป็นส่วนหนึ่งของ API การจัดเก็บเว็บ API นี้ช่วยให้คุณสามารถจัดเก็บข้อมูลภายในเบราว์เซอร์ของผู้ใช้ซึ่งแอปพลิเคชันของคุณสามารถเข้าถึงได้

API การจัดเก็บมีประโยชน์เพราะหมายความว่าคุณไม่จำเป็นต้องส่งข้อมูลทุกชิ้นเกี่ยวกับเซสชันของผู้ใช้ไปยังฐานข้อมูล หากผู้ใช้เปิดใช้งานโหมดมืดบนไซต์ของคุณ คุณสามารถติดตามได้ทางฝั่งไคลเอ็นต์ ถ้าผู้ใช้บันทึกแบบฟอร์มไว้ใช้ในภายหลัง คุณไม่จำเป็นต้องเก็บแบบฟอร์มที่กรอกไว้ครึ่งหนึ่งในฐานข้อมูลของคุณ

การจัดเก็บเว็บมีสองประเภท localStorage คือข้อมูลที่จะอยู่ในหน้าต่างเบราว์เซอร์ของผู้ใช้แม้ว่าจะปิดแท็บเบราว์เซอร์แล้วก็ตาม ต่างจากคุกกี้ ข้อมูล localStorage คือข้อมูลที่ไม่มีวันหมดอายุ sessionStorage คือข้อมูลที่คงอยู่จนกว่าเซสชันจะหมดอายุ ซึ่งหมายความว่าจนกว่าเบราว์เซอร์จะปิด

ในบทความนี้ เราจะเน้นไปที่วัตถุ localStorage อย่างไรก็ตาม คุณสามารถแทนที่ค่านี้สำหรับ sessionStorage เนื่องจากทั้งคู่ใช้ไวยากรณ์เดียวกัน

วิธีใช้ localStorage

ก่อนที่เราจะเจาะลึกเข้าไปในตัวอย่างของเรา มาดูวิธีการที่นำเสนอโดย localStorage

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ในการสร้างรายการ localStorage เราสามารถใช้วิธีการที่เรียกว่า setItem() :

localStorage.setItem("name", "Linda Carlton");
console.log(localStorage);

รหัสของเราส่งคืน:

{ name: "Linda Carlton", length: 1 }

localStorage จัดเก็บรายการในคู่คีย์:ค่า ในตัวอย่างของเรา เราได้สร้างรายการที่เรียกว่า “ชื่อ” สินค้าชิ้นนี้มีมูลค่า “ลินดา คาร์ลตัน”

เราใช้ console.log() คำสั่งเพื่อพิมพ์เนื้อหาของ localStorage เพื่อให้แน่ใจว่าได้เพิ่มมูลค่าของเราแล้ว

คุณสามารถใช้รหัสเดียวกันนี้เพื่ออัปเดตค่าที่เก็บไว้ใน localStorage

ในการดึงค่าเฉพาะจาก localStorage คุณสามารถใช้ getItem() วิธีการ:

localStorage.getItem("name");

รหัสของเราส่งคืน:

Linda Carlton.

มีสองวิธีที่คุณสามารถใช้เพื่อลบข้อมูลออกจาก localStorage:

removeItem():ลบรายการเดียวออกจาก localStorage
clear():ลบทุกรายการใน localStorage()

หากเราต้องการลบรายการ "ชื่อ" ของเราออกจากที่จัดเก็บในตัวเครื่อง เราสามารถใช้รหัสนี้:

localStorage.removeItem(name);
console.log(localStorage);

รหัสของเราส่งคืน:

{ length: 0 }

โปรดสังเกตว่าแม้ว่าเราจะล้าง localStorage ของเราแล้ว แต่ก็ยังมีรายการหนึ่งที่เก็บไว้:ความยาว สิ่งนี้บอกเราว่ามีการจัดเก็บรายการใดบ้างใน localStorage ตอนนี้เราได้ลบรายการ "ชื่อ" แล้ว ไม่มีอะไรจัดเก็บไว้ใน localStorage

สิ่งสำคัญที่ควรทราบคือ localStorage สามารถจัดเก็บสตริงได้เท่านั้น

การสร้างคุณลักษณะการบันทึกแบบฟอร์มโดยใช้ localStorage

เราทุกคนเคยอยู่ในบางเว็บไซต์ที่ขอให้เรากรอกแบบฟอร์มยาวๆ เว้นแต่สิ่งที่สำคัญจริงๆ ฉันชอบที่จะกลับไปใช้แบบฟอร์มนั้นในภายหลัง นั่นเป็นเหตุผลที่ไซต์จำนวนมากมีคุณลักษณะ "บันทึกแบบฟอร์ม" ที่จะติดตามรายละเอียดแบบฟอร์มของคุณในภายหลัง

แม้ว่าสิ่งเหล่านี้อาจติดตามข้อมูลของคุณในฐานข้อมูล แต่คุณสามารถสร้างเวอร์ชันที่มีน้ำหนักเบาได้โดยใช้วิธีการ localStorage

สร้างส่วนหน้า

เรากำลังจะสร้างแบบฟอร์มคำติชมของลูกค้าสำหรับร้านน้ำชาในท้องถิ่น The Little Tea House ขั้นตอนแรกของเราคือการสร้าง front-end สำหรับเว็บแอปพลิเคชันของเรา สร้างไฟล์ชื่อ index.html แล้ววางในโค้ดต่อไปนี้:

<!DOCTYPE html>
<html>
	<head>
    	<title>The Little Tea House Feedback</title>
    	<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
    	<div>
        	<h1>The Little Tea House: Customer Feedback</h1>
        	<p>How was your experience at The Little Tea House? We'd love to learn more!</p>
        	<form>
            	<label for="name">Name: </label>
            	<input id="name" type="text" /><br /><br />

            	<label for="email">Email: </label>
            	<input id="email" type="email" /><br /><br />

            	<label for="feedback">Message: </label><br /><br />
            	<textarea id="feedback"></textarea><br /><br />

            	<button id="saveButton">Save form</button>
            	<button id="retrieveButton">Retrieve form</button>
        	</form>
    	</div>
    	<script src="./form.js"></script>
	</body>
</html>

รหัสนี้สร้างหน้า HTML พื้นฐานพร้อมฟิลด์แบบฟอร์มของเรา:

ไซต์ของเรามีทุกสิ่งที่จำเป็นแล้ว แต่เราจะเพิ่มสไตล์อีกสองสามรูปแบบเพื่อให้ดูสวยงามยิ่งขึ้น สร้างไฟล์ชื่อ styles.css แล้ววางในรหัสนี้:

div {
    margin-left: 15vw;
    margin-right: 15vw;
    background-color: lightblue;
    padding: 20px;
}

กลับไปที่เว็บไซต์และรีเฟรชหน้า:

อย่างที่คุณเห็น ขณะนี้แบบฟอร์มของเราปรากฏขึ้นที่กึ่งกลางของหน้าเว็บและมีพื้นหลังสีน้ำเงิน มันดูดี! ตอนนี้เราพร้อมที่จะเริ่มเขียน JavaScript สำหรับหน้าเว็บนี้แล้ว

สร้างคุณลักษณะการบันทึกแบบฟอร์ม

ขั้นตอนต่อไปของเราคือการรวบรวมค่าที่เก็บไว้ในฟิลด์แบบฟอร์มของเรา จากด้านบน ฟิลด์แบบฟอร์มของเรามีรหัส:

ชื่อ (ช่องชื่อของเรา)
อีเมล (ช่องอีเมลของเรา)
คำติชม (ช่องข้อความของเรา)

เราสามารถใช้ ID เหล่านี้เพื่อดึงค่าจากแต่ละฟิลด์ในแบบฟอร์มของเรา สร้างไฟล์ชื่อ form.js และวางในรหัสนี้:

var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var feedbackField = document.getElementById("feedback");

เรากำลังประกาศตัวแปรเหล่านี้เป็นตัวแปร "var" เนื่องจากเราจะเปลี่ยนค่าในภายหลัง นอกจากนี้เรายังจะดึงปุ่มของเราเพื่อให้เราสามารถคลิกได้ในภายหลังในบทช่วยสอน:

var saveButton = document.getElementById("saveButton");
var retrieveButton = document.getElementById("retrieveButton");

ขั้นตอนต่อไปของเราคือการสร้างฟังก์ชันที่บันทึกค่าเหล่านี้ลงใน localStorage เมื่อกดปุ่มของเรา เราจะดำเนินการโดยใช้รหัสต่อไปนี้:

function saveResponses() {
	localStorage.setItem("name", nameField.value);
	localStorage.setItem("email", emailField.value);
   	localStorage.setItem("feedback", feedbackField.value);
}

รหัสนี้จะไม่ทำงานจนกว่า saveResponses() . ของเรา ฟังก์ชั่นถูกเรียกใช้ แล้วเราจะทำให้มันเกิดขึ้นได้อย่างไร? เราต้องเชื่อมโยงมันกับปุ่มของเรา รหัสนี้ช่วยให้เราสามารถเรียกใช้ฟังก์ชันของเราเมื่อมีการคลิกปุ่มของเรา:

saveButton.addEventListener("click", saveResponses);

ตอนนี้เมื่อเรากดปุ่ม "บันทึกแบบฟอร์ม" คำตอบของเราจะถูกเก็บไว้ใน localStorage

แต่จะไม่มีประโยชน์ในการจัดเก็บข้อมูลนี้หากเราไม่สามารถดึงข้อมูลได้ เราจะเขียนฟังก์ชันที่ดึงข้อมูลนี้เมื่อคลิกปุ่ม "เรียกแบบฟอร์ม":

function retrieveResponses() {
	nameField.value = localStorage.getItem("name");
   	emailField.value = localStorage.getItem("email");
    	feedbackField.value = localStorage.getItem("feedback");
}

retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });

ยอดเยี่ยม! รหัสนี้ตั้งค่าของแต่ละฟิลด์แบบฟอร์มของเราเป็นค่าที่เก็บไว้ใน localStorage หากมีค่า ตอนนี้ มารันโค้ดของเรากันและดูว่าเกิดอะไรขึ้น:

รูปร่างของเราก็เหมือนกัน ลองแทรกค่าบางค่าลงในแบบฟอร์มแล้วกดปุ่ม "บันทึกแบบฟอร์ม" การดำเนินการนี้จะบันทึกคำตอบของคุณในแบบฟอร์ม

ตอนนี้ รีเฟรชหน้าของคุณแล้วกด “ดึงแบบฟอร์ม” คุณจะสังเกตเห็นว่าการตอบกลับแบบฟอร์มของคุณได้รับการบันทึกแล้ว! ข้อมูลใน localStorage จะยังคงอยู่แม้ว่าเราจะปิดแท็บ มันจะไม่ถูกลบเมื่อปิดเบราว์เซอร์เช่นกัน เราทำได้!

คำตอบของแบบฟอร์มเหล่านี้จะถูกบันทึกจนกว่าคุณจะบันทึกแบบฟอร์มอีกครั้งหรือล้างแคช

หมายเหตุ:คุณไม่ควรใช้เทคนิคนี้ในการจัดเก็บข้อมูลที่ละเอียดอ่อน ข้อมูลทั้งหมดใน localStorage ถูกจัดเก็บเป็นข้อความธรรมดา ซึ่งหมายความว่าผู้ใช้ที่อ่านสามารถเข้าถึงได้ทุกราย

บทสรุป

วิธีการ localStorage ช่วยให้คุณสามารถจัดเก็บข้อมูลในเครื่องใน JavaScript สำหรับแอปพลิเคชันทั่วไป เช่น รายการสิ่งที่ต้องทำ การบันทึกการตั้งค่าผู้ใช้ หรือการบันทึกข้อมูลในแบบฟอร์มของผู้ใช้ (ไม่รวมข้อมูลที่ละเอียดอ่อน) จะดีกว่าการใช้ฐานข้อมูลมาก localStorage ติดตั้งง่าย ใช้งานง่าย และเป็น JavaScript วานิลลา 100%

ตอนนี้คุณก็พร้อมที่จะเริ่มใช้วิธี localStorage เหมือนนักพัฒนา JavaScript ผู้เชี่ยวชาญแล้ว!