Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > บทความจากสมาชิก > HTML5 ใช้ JavaScript เก็บค่าตัวแปรที่ Client ด้วย localStorage และ sessionStorage (Web Storage)

HTML5 ใช้ JavaScript เก็บค่าตัวแปรที่ Client ด้วย localStorage และ sessionStorage (Web Storage)

HTML5 ใช้ JavaScript เก็บค่าตัวแปรที่ Client ด้วย localStorage และ sessionStorage (Web Storage) ในการเขียนโปรแกรมที่ทำงานบน Web จะเห็นว่าทุกวันนี้มีการพัฒนา User Interface ที่สามารถทำงานได้อย่างรวดเร็ว สามารถตอบสนองข้อมูลทันทีทันใด ส่วนหนึ่งเป็นเพราะมีการจัดการกับค่าตัวแปรที่ต้องการนำไปกับการจัดการกับ UI ต่าง ๆ ได้ในทันที ซึ่งวิธีการเหล่านี้ในสมัยแรก ๆ ในการส่งค่าตัวแปรไปยัง Page ต่าง ๆ อาจจะต้องส่งผ่าน Cookies ของ JavaScript หรืออาจจะส่งไปยัง Web Server แล้วใช้พวก PHP เก็บค่าแล้วค่อยส่งมันกลับมายัง Client ซึ่งจะเห็นว่าในหลายๆ ครั้งการเรียกค่าตัวแปรมาใช้งานค่อนข้างจะลำบากมาก

HTML5 Web Storage (localStorage / sessionStorage)

ใน HTML 5จึงได้ออกแบบ Web Storage เข้ามาจัดการกับปัญหาเหล่านี้ โดยในรูปแบบของ Storage จะมีอยู่ 2 ประเภทคือ localStorage และ sessionStorage การทำงานของมันทั้ง 2 ตัวนี้จะคล้าย ๆ กันแตกต่างกันตรงที่
- localStorage หลักการทำงานเหมือน Cookies คือ จะอยู่ตลอดไป แม้ว่าจะปิด Web Browser หรือ Restart เครื่องก็ตาม
- sessionStorage หลักการเหมือนกับ Session คือจะหายไป เมื่อทำการปิด Web Browser หรือ Restart

จากเหตุผลที่แตกต่างกันเราก็น่าจะเลือกได้ถูกต้องว่าจะใช้งานตัวไหนระหว่าง localStorage กับ sessionStorage และจากเหตุผลในข้างต้นคือ มันถูกจัดเก็บไว้ที่ Client ฉะนั้นข้อมูลหรอตัวแปรที่จะจัดเก็บจะมีความปลอดภัยที่ต่ำมาก ฉะนั้นในการใช้งานก็ควรจะเลือกจัดเก็บค่าที่คิดว่าไม่สำคัญ สามารถเปิดเผยได้โดยไม่มีผลในด้านความปลอดภัย เมื่อถูกคุกคามจากผู้ที่ไม่ประสงค์ดี อละอีกความสามารถหนึ่งของ Web Storage คือสามารถเก็บข้อมูลขนาดใหญ่ได้ถึง 5 MB เลยทีเดียว และสามารถเก็บค่าได้เฉพาะ String หรือข้อความเท่านั้น

จะใช้ Web Storage จะต้องทำอย่างไร เนื่อจากเป็น Feature ของ Web Browser ที่รองรับ HTML5 ดังนั้นในการพัฒนาเว็บไวต์ ในยุคปัจจุบัน จะสามารถใช้งาน Web Storage ได้ในทันที ซึ่งจะอยู่ที่ปัจจัยของ Version บน Web Browser

HTML5 Web Storage

Note! เนื่องจาก Web Storage จะรองรับ Web Browser เวอร์ชั่นขั้นต่ำที่กำหนดไว้ ฉะนั้นการใช้งานในเวอร์ชั่นที่ต่ำกว่า จะไม่สามารถใช้งาน Web Storage ได้

localStorage ตัวอย่างการใช้งานแบบง่าย ๆ

การสร้างตัวแปร

localStorage.setItem("site", "thaicreate.com");

เป็นการกำหนดตัวแปรชื่อ site เก็บค่า thaicreate.com สามารถประกาศได้อีกรูปแบบคือ localStorage.site = "thaicreate.com";

การอ่านค่าตัวแปร

localStorage.getItem("site");

เป็นการอ่านตัวแปรชื่อ site ซึ่งจะได้ค่า thaicreate.com สามารถเรียกได้อีกรูปแบบคือ localStorage.site;

การลบค่าตัวแปร

localStorage.removeItem("site");

เป็นการลบตัวแปรชื่อ site

การอ่านค่าตัวแปรอ้างจาก Key

localStorage.key(0);

โดยปกติค่าจะเรียกจากลำดับที่ถูกสร้าง

การลบค่าตัวแปรทั้งหมด

localStorage.clear();

ลบค่าทั้งหมด

sessionStorage รูปแบบการใช้งานไม่ต่างไปจาก localStorage เช่น

sessionStorage.setItem("site", "thaicreate.com");
sessionStorage.getItem("site");
sessionStorage.removeItem("site");

ตัวอย่างการใช้งาน สำหรับตัวอย่างนี้จะเป็นการยกตัวอย่างสร้างเพจขึ้นมา 2 หน้า โดยรับค่าจาก เพจแรก และส่งไปยัง เพจสอง

page1.html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head>
<body>
<p>localStorage & sessionStorage</p>
Input your name <input type="text" id="txtName" name="txtName"> <br />
Input your email <input type="text" id="txtEmail" name="txtEmail"> <br /><br />
<input type="button" id="btnNext" value="Next">
</body>
<script type="text/javascript">
$(document).ready(function(){
	
	// validate support storage
	if(typeof(Storage) == "undefined") {    
		alert("Not storage support");
	}
	
	// button click
	$("#btnNext").click(function(){
		
		// set storage
		localStorage.setItem("sName", $("#txtName").val());
		localStorage.setItem("sEmail", $("#txtEmail").val());
		
		window.location="page2.html";
	});
});
</script>
</html>

page2.html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head>
<body>
<p>Hello</p>
Name : <span id="spName"></span> <br />
Email : <span id="spEmail"></span> <br /><br />
<input type="button" id="btnClear" value="Clear">
</body>
<script type="text/javascript">
$(document).ready(function(){
	
	// get value from storage
	$("#spName").html( localStorage.getItem("sName"));
	$("#spEmail").html( localStorage.getItem("sEmail"));
	
	// button click
	$("#btnClear").click(function(){		
		localStorage.removeItem("sName");
		localStorage.removeItem("sEmail");
		window.location.reload();
	});
});
</script>
</html>


	By :	TC Admin
	Article :	บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
	Score Rating :
	Create Date :	2016-12-20
	Download :	No files

Sponsored Links

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว