ความคิดเห็น: LocalStorage (ที่เก็บข้อมูลในพื้นที่) สามารถจัดเก็บข้อมูลเป็นเวลานานโดยไม่ จำกัด เวลาหนึ่งวันหนึ่งปีสองปีหรือนานกว่านั้นสามารถใช้ข้อมูลเซสชัน Storage (ที่เก็บเซสชัน) ก่อนที่เบราว์เซอร์จะปิดมันสามารถใช้งานได้เมื่อสร้างหน้าอื่นและข้อมูลจะหายไปหลังจากปิดเบราว์เซอร์
ใช้วิธีการ LocalStorage และ SessionStorage ของ HTML5 Web Storage เพื่อจัดเก็บข้อมูลหน้าเว็บ localStorage
หน้าถูกอ้างอิงตามที่แสดงในรูปด้านล่างและข้อมูลในหน้าสามารถเก็บไว้ในเครื่อง และสามารถอ่านข้อมูลที่เก็บไว้และแสดงบนหน้า
LocalStorage (ที่เก็บข้อมูลในพื้นที่) สามารถจัดเก็บข้อมูลเป็นเวลานานโดยไม่ จำกัด เวลาหนึ่งวันหนึ่งปีสองปีหรือนานกว่านั้นสามารถใช้ข้อมูลได้
SessionStorage ซึ่งสามารถใช้งานได้ก่อนที่เบราว์เซอร์จะปิดสามารถใช้งานได้เมื่อสร้างหน้าอื่นและข้อมูลจะหายไปหลังจากปิดเบราว์เซอร์
สถานการณ์การเข้ากันได้ของ LocalStorage การทดสอบของบล็อกเกอร์มีดังนี้:
Chrome4+ เริ่มสนับสนุน LocalStorage
Firefox3.5+ เริ่มสนับสนุน LocalStorage
Firefox1.5+ สนับสนุน GlobalStorage
IE8+ รองรับ LocalStorage
โหมดความเข้ากันได้ของ IE7 รองรับ LocalStorage
IE5.5+ รองรับ UserData
Safari 4+ รองรับ LocalStorage
OperA10.5+ รองรับ LocalStorage
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style type = "text/css">
Textarea {
ความกว้าง: 300px;
ความสูง: 300px;
-
.ปุ่ม {
ความกว้าง: 100px;
-
</style>
</head>
<body>
<script type = "text/javascript">
// ใช้วิธีการ LocalStorage และ SessionStorage ของ HTML5 Web Storage สำหรับการจัดเก็บข้อมูลเว็บเพจในท้องถิ่น
// อ้างถึงรูปต่อไปนี้เพื่อจัดเก็บข้อมูลบนหน้าเว็บในเครื่อง และสามารถอ่านข้อมูลที่เก็บไว้และแสดงบนหน้า
ฟังก์ชั่น savesession () {
var t1 = document.getElementById ("T1");
var t2 = document.getElementById ("T2");
var mydata = t2.value;
var ostorage = window.sessionStorage;
ostorage.mydata = myData;
T1.Value + = "SessionStorage บันทึก myData:" + myData + "/n";
-
การอ่านฟังก์ชัน () {
var t1 = document.getElementById ("T1");
var ostorage = window.sessionStorage;
var mydata = "ไม่มีอยู่";
if (ostorage.mydata) {
myData = ostorage.mydata;
-
T1.Value + = "SessionStorage อ่าน myData:" + myData + "/n";
-
ฟังก์ชั่นทำความสะอาด () {
var t1 = document.getElementById ("T1");
var ostorage = window.sessionStorage;
var mydata = "ไม่มีอยู่";
if (ostorage.mydata) {
myData = ostorage.mydata;
-
Ostorage.removeitem ("mydata");
t1.value + = "sessionstorageclear mydata:" + mydata + "/n";
-
ฟังก์ชั่น SaveStorage () {
var t1 = document.getElementById ("T1");
var t2 = document.getElementById ("T2");
var mydata = t2.value;
var ostorage = window.localstorage;
ostorage.mydata = myData;
t1.value + = "localstorage บันทึก mydata:" + mydata + "/n";
-
ฟังก์ชั่น readstorage () {
var t1 = document.getElementById ("T1");
var ostorage = window.localstorage;
var mydata = "ไม่มีอยู่";
if (ostorage.mydata) {
myData = ostorage.mydata;
-
t1.value + = "localstorage อ่าน mydata:" + mydata + "/n";
-
ฟังก์ชั่น CleanStorage () {
var t1 = document.getElementById ("T1");
var ostorage = window.localstorage;
var mydata = "ไม่มีอยู่";
if (ostorage.mydata) {
myData = ostorage.mydata;
-
Ostorage.removeitem ("mydata");
t1.value + = "localstorageclear mydata:" + mydata + "/n";
-
</script>
<div>
<Textarea> </cepenarea>
<label> ข้อมูลที่จะบันทึก: </label>
<input type = "text" />
<input type = "button" value = "sessionsave" />
<อินพุต type = "ปุ่ม" value = "เซสชันอ่าน" />
<อินพุต type = "ปุ่ม" value = "เซสชันล้าง" />
<อินพุต type = "ปุ่ม" value = "local save" />
<อินพุต type = "ปุ่ม" value = "local read" />
<input type = "button" value = "localClear" />
</div>
</body>
</html>