LocalStorage จะถูกจัดเก็บไว้ในเบราว์เซอร์เสมอ เว้นแต่จะมีการล้างข้อมูลด้วยตนเอง อย่างไรก็ตาม ในหลายกรณี เราอาจต้องการให้ localStorage มีเวลาหมดอายุ ตัวอย่างเช่น หากเราบันทึกโทเค็นการตรวจสอบสิทธิ์ผู้ใช้ไว้บนไคลเอ็นต์ ก็จะใช้ได้ภายใน 1 สัปดาห์ และหากเกินหนึ่งสัปดาห์ ให้เข้าสู่ระบบอีกครั้ง แล้วจะปฏิบัติตามข้อกำหนดนี้ได้อย่างไร
คุณต้องรู้ว่า localStorage ไม่มีกลไกการหมดอายุ ในกรณีนี้ เราสามารถทำได้ด้วยตัวเองเท่านั้น เราสามารถเพิ่มวิธีการดังกล่าวลงในต้นแบบได้โดยตรง
Storage.prototype.setExpire=(คีย์,ค่า,หมดอายุ) =>{ };Storage.setExpire(คีย์,ค่า,หมดอายุ);หากต้องการหมดอายุต้องบันทึกเวลา ความคิดของเราคือบันทึกเวลาปัจจุบันเมื่อตั้งค่าแล้วเมื่อได้รับค่าให้ตัดสินว่าเวลาปัจจุบันและเวลาก่อนหน้านั้นอยู่ภายในช่วงที่กำหนดหรือไม่ อยู่นอกช่วง ให้ล้างรายการปัจจุบันและส่งกลับค่าว่าง
หากต้องการเพิ่มเวลาให้กับค่า จะต้องกำหนดรูปแบบ
Storage.prototype.setExpire=(คีย์, ค่า, หมดอายุ) =>{ ให้ obj={ data:value, time:Date.now(), หมดอายุ:expire }; localStorage.setItem(key,JSON.stringify(obj)) ;}ประกอบด้วย 3 ช่องต่อไปนี้
เนื่องจากค่าที่กำหนดโดย localStorage ไม่สามารถเป็นอ็อบเจ็กต์ได้ จึงมีการใช้เมธอด JSON.stringify ที่นี่เพื่อแปลงเป็นสตริง และจะต้องแปลงกลับเมื่อใช้
จากนั้นเราก็เพิ่มวิธีการรับ
Storage.prototype.getExpire= key =>{ la val =localStorage.getItem(key); if(!val){ return val; } val =JSON.parse(val); if(Date.now()-val.time >val.expire){ localStorage.removeItem(คีย์); } return val.data;}เราสามารถทดสอบก่อนได้
localStorage.setExpire(โทเค็น,'xxxxxx',5000);window.setInterval(()=>{ console.log(localStorage.getExpire(โทเค็น));},1000)โดยพื้นฐานแล้ว แนวคิดของเราไม่ใช่การทำความสะอาดสิ่งของที่หมดอายุเป็นประจำ แต่เพื่อตรวจสอบว่าสิ่งของเหล่านั้นหมดอายุเมื่อได้รับมาหรือไม่ จากนั้นล้างสิ่งของหากพวกมันหมดอายุ
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network