ต้องการเก็บข้อมูลส่วนที่ใช้บ่อย ๆ ไว้ในฝั่ง user (browser) นั่นละ จะได้ลดการ query แต่ข้อมูลมันมีการเปลี่ยนแปลงด้วย ที่เก็บข้อมูลระยะยาวได้ในฝั่ง browser กลับออกแบบให้ localStorage เก็บข้อมูลถาวรโดยไม่มีการ expires เหมือน cookie ทำให้ต้องเขียน code จัดการเพิ่ม
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax: localStorage</title>
</head>
<body>
<h1>localStorage</h1>
<div class="col-sm-12" id="datasA"></div>
<div class="col-sm-12" id="resultA"></div>
<script src="../vendor/components/jquery/jquery.min.js"></script>
<script>
$ (function () {
function getDatas () {
let cacheKey = 'memories';
if (cacheKey in localStorage) {
let datas = JSON.parse (localStorage.getItem (cacheKey)) ;
// if expired
if (datas['expires'] < Date.now ()) {
localStorage.removeItem (cacheKey) ;
getDatas () } else {
setDatas (datas) ;
}
} else {
$.ajax ({
"dataType": "json",
"success": function (datas, textStatus, jqXHR) {
let today = new Date () ;
datas['expires'] = today.setDate (today.getDate () + 7) // expires in next 7 days
setDatas (datas) ;
localStorage.setItem (cacheKey, JSON.stringify (datas)) ;
},
"url": "http://localhost/phunsanit/snippets/PHP/json.json_encode.php",
}) ;
}
}
function setDatas (datas) {
// display json as text
$ ('#datasA') .text (JSON.stringify (datas)) ;
// your code here
let html = '';
$.each (datas.datas, function (index, value) {
html += '<br>' + index + ' = ' + value;
}) ;
$ ('#resultA') .html (html) ;
}
// call
getDatas () ;
}) ;
</script>
</body>
</html>
ข้อมูลที่ call ผ่าน ajax จะโดนเก็บใน localStorage แต่เวลาใช้ก็จะเอามาเทียบ expires ก่อน ถ้ายังไม่หมดอายุก็เอามาใช้ ถ้าหมดอายุไปแล้วก็ call ใหม่ ลองดัดแปลงดูให้เหมาะกับงานดูครับ