ต้องการเก็บข้อมูลส่วนที่ใช้บ่อย ๆ ไว้ในฝั่ง 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 ใหม่ ลองดัดแปลงดูให้เหมาะกับงานดูครับ