ค้นหาเว็บไซต์

javascript - วิธีทำให้ตัวแปร JS รักษาค่าหลังจากรีเฟรชหน้าเว็บ

เป็นไปได้ไหมที่จะเปลี่ยนตัวแปร JavaScript แบบถาวร? เช่น ถ้าฉันตั้งค่าตัวแปร X ให้เท่ากับ 1 แล้วเมื่อคลิกปุ่มเปลี่ยนตัวแปรนั้นเป็น 2 จะทำอย่างไรให้ตัวแปรนั้นยังคงเป็น 2 เมื่อรีเฟรชหน้าเว็บ?

คำตอบ #1

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

เมื่อคุณจำเป็นต้องตั้งค่าตัวแปรที่ควรจะแสดงผลในหน้าถัดไป ใช้:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

และในหน้าใด ๆ (เช่นเมื่อหน้าได้โหลดแล้ว) ให้ดึงมันแบบนี้:

var someVarName = localStorage.getItem("someVarKey");

.getItem() จะคืนค่า null หากไม่มีค่าเก็บไว้ หรือค่าที่เก็บไว้

โปรดทราบว่า สามารถเก็บค่าเป็นสตริงเท่านั้น ในหน่วยเก็บนี้ แต่สามารถแก้ไขได้โดยใช้ JSON.stringify และ JSON.parse ทางเทคนิคแล้ว ทุกครั้งที่คุณเรียก .setItem() มันจะเรียก .toString() บนค่าดังกล่าวและเก็บค่าไว้

คู่มือการจัดเก็บ DOM ของ MDN (ลิงก์ด้านล่าง) มีวิธีแก้ไข/โพลีฟิล ซึ่งจะกลับไปใช้สิ่งต่างๆ เช่น คุกกี้ หาก localStorage ไม่สามารถใช้งานได้

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

เอกสารอ้างอิง:

  • เบราว์เซอร์ Storage - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
  • localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
  • JSON - https://developer.mozilla.org/en-US/docs/JSON
  • ความเข้ากันได้ของการจัดเก็บเบราว์เซอร์ - http://caniuse.com/namevalue-storage
  • การจัดเก็บวัตถุ - การจัดเก็บวัตถุใน localStorage ของ HTML5

คำตอบ #2

นอกจากคุกกี้และ localStorage แล้วยังมีอีกอย่างน้อยหนึ่งที่คุณสามารถจัดเก็บข้อมูลลูกค้าที่ 'กึ่งถาวร' ได้: window.name ค่าของสตริงใด ๆ ที่คุณกำหนดให้กับ window.name จะคงอยู่ที่นั่นจนกว่าหน้าต่างจะถูกปิด

ในการทดสอบ เพียงเปิดคอนโซลแล้วพิมพ์ window.name="foo" จากนั้นรีเฟรชหน้าเพจและพิมพ์ window.name; มันควรจะแสดงผลลัพธ์เป็น foo.

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

window.name มีคุณสมบัติที่น่าสนใจอีกอย่างหนึ่ง: มันสามารถมองเห็นได้จากหน้าต่างที่ถูกให้บริการจากโดเมนอื่น; มันไม่ได้อยู่ภายใต้นโยบายต้นทางเดียวกันเหมือนคุณสมบัติอื่น ๆ ของ window เกือบทั้งหมด ดังนั้น นอกเหนือจากการเก็บข้อมูล "กึ่งถาวร" ที่นั่นในขณะที่ผู้ใช้กำลังนำทางหรือรีเฟรชหน้าเว็บ คุณยังสามารถใช้มันสำหรับการสื่อสารข้ามโดเมนโดยไม่ต้องมี CORS

โปรดทราบว่า window.name สามารถเก็บค่าได้เฉพาะสตริงเท่านั้น แต่ด้วยความสามารถในการใช้งาน JSON อย่างแพร่หลาย นี่ไม่น่าจะเป็นปัญหามากแม้สำหรับข้อมูลที่ซับซ้อน

บทความที่เกี่ยวข้อง