Caching is a technique for storing data in a temporary storage area called a cache. It aims to retrieve data quickly and avoid costly processes such as recalculating or searching it in the database, especially for frequently asked resources. In the first article, I introduced the different possibilities for caching data in JavaScript and how to choose the appropriate caching possibility according to your needs. I also introduced an example of using the Web Storage API (localStorage and sessionStorage) to cache data. So, I will dedicate this article to using objects and data-* attributes to temporarily cache data in JavaScript.
1. In-memory Caching
This technique is used to retain data for a short period of time, such as the result of API calls during a single session. The data will be removed from the cache after the page refreshes. Even though it only caches data for short-term caching while a user is on a page, this technique is still an efficient way to use resources and retrieve data quickly, instead of repeatedly searching for it on the server.
In this section, we will see through examples two approaches to temporarily caching data:
- JavaScript objects or variables
- data-* attributes
1.1. Using Objects or Variables for In-Memory Caching
JavaScript objects or variables to store data in memory are mechanisms suitable for short-term or temporary caching while a user is on a page. Let’s take an example of how you can cache the result of an API call using objects. For this, we need a back-end code to return data. An easy way to do this is to use Python’s Flask framework. Moreover, we develop HTML, CSS, and JavaScript code for the front-end.
Note. We only write the relevant part here to explain how to use the objects to cache data. If you want the full example, you can find it on GitHub here:
https://github.com/noura-github/inmemory-caching-app-blog
Python Code
In the back-end code, we first define ‘james_bond_films’ as a list containing a collection of dictionaries, where each dictionary represents a James Bond film and includes details such as its ID, title, release year, star, and director.
james_bond_films = [
{"id": 10, "title": "No Time to Die", "year": 2021, "starring": "Daniel Craig", "directedBy": "Cary Joji Fukunaga"},
{"id": 20, "title": "Die Another Day", "year": 2002, "starring": "Pierce Brosnan", "directedBy": "Lee Tamahori"},
{"id": 30, "title": "The Living Daylights", "year": 1987, "starring": "Timothy Dalton", "directedBy": "John Glen"},
{"id": 40, "title": "A View to a Kill", "year": 1985, "starring": " Roger Moore", "directedBy": "John Glen"},
{"id": 50, "title": "Never Say Never Again", "year": 1983, "starring": "Sean Connery", "directedBy": "Irvin Kershner"},
]
In this Python code, we define two methods that we explain as follows:
Method ‘get_film_data’: To return these details in response to an AJAX POST request, we define a Flask route in ‘/load_film_data’. It fetches the JSON data from the request, extracts the film ID, and searches for the corresponding film data in the predefined ‘james_bond_films’ list using the ‘search’ method. Finally, it returns the film data as a JSON response.
Method ‘search’: The search method takes two parameters, ‘id’ and ‘ls’. It searches for a film in the ‘ls’ list whose ID matches the provided ‘id’. If a match is found, it returns the corresponding data of that film as a dictionary. If no match is found, it returns None.
# Helper function to search for an item in a list
def search(id, ls):
result = [element for element in ls if element["id"] == id]
if len(result) > 0:
return result[0]
return None
# Route to handle AJAX POST request
@app.route('/load_film_data', methods=['POST'])
def get_film_data():
# Get JSON data from request
data = request.get_json()
film_id = data.get('filmId')
film_data = search(int(film_id), james_bond_films)
print("Found film data: ", film_data)
# Send a JSON response back to the client
return jsonify({
'status': 'success',
'film_data': film_data
})
HTML Code
In the front-end code, we define an HTML file with some elements like a drop-down list containing the list of some James Bond movies and a table to display the details of each movie when the user selects it.
<body>
<div class="container">
<h1>List of James Bond Films</h1>
<select id="selectFilm" class="select-jb-film" onchange="onChangeJBFilm()" size="1">
<option value="10">No Time to Die (2021)</option>
<option value="20">Die Another Day (2002)</option>
<option value="30">The Living Daylights (1987)</option>
<option value="40">A View to a Kill (1985)</option>
<option value="50">Never Say Never Again (1983)</option>
</select>
<br><br><br><br>
<div id="film_detail">
<table id="film_table">
<thead>
<tr>
<th>Film Title</th>
<th>Year</th>
<th>Starring</th>
<th>Directed By</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
JavaScript Code
In the JavaScript code, we implement the code for ‘onChangeJBFilm()’ and other behaviors to demonstrate the use of JavaScript objects to cache data. The code handles loading, storing, and displaying some data from the James Bond movie. In this section, we explain the main functions of the code.
We add a handler to the ‘DOMContentLoaded’ event to ensure that the JavaScript program starts once the HTML page is fully loaded and the elements are created. In this handler, we call the ‘onChangeJBFilm()’ function.
We define two global variables, the ‘cache’ object which we need to cache the data, and ‘apiUrl’ to get the data from the back-end.
// An object to store cached data
const cache = {};
// Url to get data from back-end
const apiUrl = "/load_film_data";
document.addEventListener('DOMContentLoaded', function() {
onChangeJBFilm();
}, false);
Function ‘onChangeJBFilm()’: This function is called when the selected film is changed. This function is declared as ‘async’, meaning it will return a promise and can use the await keyword inside it. In the first line, it retrieves the current value of the drop-down, which is the selected movie’s ID.
The second statement line calls the ‘fetchFilmDataFromUrl()’ function with ‘apiUrl’ and ‘filmId’ as arguments. It waits for the function to complete and assigns the returned movie data to the ‘film_data’ variable. After logging the fetched film data into the console, the function called the ‘showMovieData()’ creates a new row in the ‘film_table’ table and displays the movie data.
async function onChangeJBFilm(){
let filmId = document.getElementById("selectFilm").value;
let film_data = await fetchFilmDataFromUrl(apiUrl, filmId);
// Log the found data
console.log("Film data: ", film_data);
// Call the function with the URL and Id
showMovieData(film_data);
}
Function ‘fetchFilmDataInMemCache()’: This function is defined to retrieve movie data from the cache. Otherwise, it fetches movie data from the back-end. The first statements of the function allow to retrieve the currently selected option from the select element.
The function takes two arguments, ‘url’ as the endpoint where the data will be fetched from, and ‘filmId’, which is the ID of the specific film for which data is requested. The function creates a cache key by concatenating the ‘url’ and ‘filmId’. This uniquely identifies the cached data for that particular movie request.
The function checks if the data for the given ‘cacheKey’ is already stored in the cache. If so, the data will be returned immediately.
If the data is not cached, we need to make an API call. For that, the function creates a ‘dataToSend’ object containing the ‘filmId’ ID. It sends a POST request to the specified ‘url’ with ‘dataToSend’ as the request body and waits for a response.
The function throws an error if the response is not OK. Otherwise, the response is parsed in JSON format. The retrieved data is stored in the ‘cache’ object using its ‘cacheKey’ key. Finally, the function returns the retrieved data.
// An async function that fetches data from a URL or in memory cache
async function fetchFilmDataInMemCache(url, filmId) {
//Define cache key as the combination of url and the film ID
let cacheKey = url+filmId;
// Check if data is already in the cache to return it
if (cache[cacheKey]) {
console.log('Returning cached data');
return cache[cacheKey];
}
console.log("Fetching data...");
let dataToSend = {filmId: filmId}
const response = await fetch(url,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dataToSend)
}
);
// Await the fetch request & throw an error if status is not ok
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// Await the parsing of the response as JSON
const data = await response.json();
// Store the fetched data in cache
cache[cacheKey] = data.film_data;
return data.film_data;
}
Function ‘showMovieData(film_data)’: This function dynamically creates a row in the movie details table with data such as the movie title, release year, lead role, and director. Let’s note that we create only one row every time we insert movie data. So, we clear the table’s body before adding the new row.
function showMovieData(film_data){
let table = document.getElementById("film_table");
let tBody = table.getElementsByTagName('tbody')[0];
// Clear the tbody contents to create a new row
tBody.innerHTML = "";
let film_title = film_data["title"];
//Add a new row
let tr = document.createElement('tr');
addCell(tr, film_title);
addCell(tr, film_data["year"]);
addCell(tr, film_data["starring"]);
addCell(tr, film_data["directedBy"]);
tBody.appendChild(tr);
}
Function ‘addCell(tr, item)’: This function adds a cell with a given content to a table row.
function addCell(tr, item){
var td = document.createElement('td');
var content = document.createTextNode(item);
td.appendChild(content);
tr.appendChild(td);
}
If you execute this code and open the browser, you find the following page:
1.2. Using Element Data Attributes for In-Memory Caching
In JavaScript, you can use data-* attributes to cache data on DOM elements. The role of data-* attributes is to store any additional information you need it in your code. The content of data-* attributes must be valid HTML5.
You can add data-* attributes to HTML elements directly, or you can add and access them in JavaScript. We briefly discuss the two mechanisms for using the defined data-* attributes. We then present an example of caching data using data-* attributes in JavaScript.
Adding data-* attributes to HTML elements
In your HTML, you can add use data-* attribute like that:
<div id="myFilm" data-film-id="10" data-film-title="Die another day"></div>
Accessing data-* attributes in JavaScript
In JavaScript, you can access data-* attributes using the dataset property of the DOM element. The dataset property is a read-write object that contains all the data-* attributes of an element.
// Select the element
let element = document.getElementById('myFilm');
// Read data attributes using the dataset property
let filmId = element.dataset.filmId;
// Write data in the element's data attributes
element.dataset.filmId = "Never Say Never Again";
We can also cache JavaScript objects using data-* attributes, but we must to convert them first to a string.
Example of Using Attribute Data of an Element
We keep the same example above, except we remove the ‘fetchFilmDataInMemCache()’ function and define a new function called ‘fetchFilmDataElemCache()’ to cache the data using the data-* attribute.
Function ‘fetchFilmDataInMemCache()’: This function is defined as an asynchronous function that takes a ‘url’ and a ‘filmId’ as parameters. In the first two statements, it selects an HTML element using its ‘selectFilm’ ID and retrieves the currently selected option from this element.
It checks if the selected option already has movie data stored in its data-* attribute. If so, it logs a message and returns the cached data. Here, we use ‘JSON.parse’ to convert the cached data, which is a string, into a JavaScript object.
If the data is not cached, it sends a POST request to the specified URL with the ‘filmId’ in the request body. It then waits for the response, checks for errors parses the response as JSON, and stores the fetched data in the option’s data-* attribute for future use. Here we need to convert the ‘data.film_data’ object to a string that we can store in the data-* attribute.
// An async function that fetches data from a URL or an element cache
async function fetchFilmDataElemCache(url, filmId) {
// Select the element
let element = document.getElementById('selectFilm');
//Get the selected option
var option = element.options[element.selectedIndex];
// Access data attributes using the dataset property
let filmData = option.dataset.filmData;
// Check if data is already in cache to return it
if (filmData) {
console.log('Returning cached data');
return JSON.parse(filmData);
}
console.log("Fetching data...");
let dataToSend = {filmId: filmId}
const response = await fetch(url,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dataToSend)
}
);
// Await the fetch request & throw an error if status is not ok
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// Await the parsing of the response as JSON
const data = await response.json();
// Store the fetched data in the cache
option.dataset.filmData = JSON.stringify(data.film_data);
return data.film_data;
}
