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