Client side cache memory management using Indexed DB.

 The browser cache memory is for storing the temporary files. It uses to get the files when the user needs. For example, when the user loads the web application the first time. it stores in the local memory. then, the user accesses the same data. they do not need to go and get the data from the server. they can get from local cache memory. As a result, it reduces bandwidth usage and can quickly access the application.

Sample-1

 There is various type of cache concept in the local cache memory such as local storage, session storage, cookies and Indexed DB. those are used by developers when they have a different purpose. Here, i have used the Indexed DB for storing the JSON file format. we have developed the annotating text online dictionary application. it has been developed in Node JS. we have linked many dictionary API for getting the definition. When the user puts the sentence or word in the search box, it gives the most suitable definition from different dictionary API. it brings a lot of data from the API. that why we need to implement the local cache storage in this project. 

I have used the Indexed DB. it can store the data perfectly. Firstly, i need to initialize the indexed db variables like this.

Here, i have written for closing the browser tab or window, it will save to the Online database(Mongo DB).  when the user writes the function like 'request.onupgradeneeded'. it could initialize the DB name and DB version. then creating the table name like 'vocab', keypath is id. if putting the autoincrement is true. It will save the data and the id will be increased one by one. After that, creating the header label with unique as false because it allows the duplicate data. 

var transaction = db.transaction([STORE_NAME], 'readwrite');

objectStore = transaction.objectStore(STORE_NAME);

console.log(objectStore);

for (var i=0; i< data.length; i++){

objectStore.put(data[i]).onsuccess = function() {

console.log('Added vocabulary to IndexedDB from cloudantDB.');

};

}

This code illustrates for inserting the data to Indexed DB.

if you want to see the inserting data, go to the developer tool then click the storage inspection in firebox browser or shift + F9.

Getting the data from indexed DB, the user has to write the getAll() function in objectStore. It should be like this.

if ('getAll' in objectStore) {

// IDBObjectStore.getAll() will return the full set of items in our store.

objectStore.getAll().onsuccess = function(event) {

var data=event.target.result;var data = JSLINQ(event.target.result).Where(function(item){ return item.label == searchword; })resultDb=data.items;console.log("Data from indexedDB");console.log(data.items);}

}