This content originally appeared on DEV Community and was authored by Sooraj
Working as a web developer I work on the client side dealing with lots of continuous data from the server. All though it is a good practice to not store data on the client side, there will be many cases where we want to store some information on the client for faster access. A good use case would be the app theme theme: "light" or theme: "dark".
So that is where we can use Local Storage of the Browser. It is a free storage space available for almost all major browsers and we can save a considerable amount of safe data for quick use in our application. It can be found on almost all major browsers. You can view, modify or delete the local storage data under the Application Tab in your browser followed by Local Storage and clicking your domain.
// A localStorage object for performing crud operations on window.localstorage with ease
const Storage = {
// current storage data
data: null,
// check if local storage is supported on browser
exists() {
try {
return ('localStorage' in window && (window.localStorage !== null || window.localStorage !== undefined));
} catch (e) {
// you can return anything here as per your need
return false;
}
},
// clean up the data instance
clearData() {
this.data = null;
},
// get the local storage data of the key
get(key) {
this.clearData();
if (!this.exists() || (!key || !key.length)) return this.data;
if (!window.localStorage.getItem(key)) return this.data;
this.data = window.localStorage.getItem(key);
return JSON.parse(this.data);
},
// add a new data to given key in local storage
add(key, data) {
this.clearData();
if (!this.exists() || (!key || !key.length) || !data) return;
this.data = JSON.stringify(data);
window.localStorage.setItem(key, this.data);
return { key, data };
},
// remove the data by the given key from local storage
remove(key) {
this.clearData();
if (!this.exists() || (!key || !key.length)) return this.data;
if (!window.localStorage.getItem(key)) return this.data;
window.localStorage.removeItem(key);
},
// wipe entire local storage of current domain
wipe() {
this.clearData();
if (!this.exists()) return;
window.localStorage.clear();
}
}
export default Storage;
As you can see here, I added all the things that we mostly do with local storage. Usually all these functions are separately written in a utility module. But here I have kept it separately so that in any case of change, we just replace the functions inside the module and our application code remains untouched. The whole point of writing these functions together as a module is to keep the code clean, crisp and understandable.
I have a total of 7 properties on my module here which are as follows.
1.data - This is just a temporary storage variable that I am using. You can skip this, but I have kept this for intermediate conversions.
2.exists() - This is a function that checks if the current browser supports local storage or not. This function can be called separately as Storage.exists(). This function is also called before every storage action to check if local storage is supported.
3.clearData() - This function is used to clear the value of the data variable. You can skip this too if not needed.
4.get(key) - This function is used to get the data that is associated with the key that is sent in the parameters. For example if get("name") will get you the data that is saved under the name key in local storage. This function calls the window function called localStorage.getItem() which takes 1 parameter "key".
5.add(key, data) - This function is used to add new data to the local storage. The key attribute specifies to which key the data should be added to and the data attribute contains the data to be added. This function calls the window function called localStorage.setItem() which takes 2 parameters "key" and "data". It could be anything like a string, number, array, object etc.
For example running this =>
Storage.add("myKey", { name: "Sooraj" })
Will add this under the key called "myKey"
6.remove(key) - This function is used to remove the data associated with the key that is sent in the parameters. This function calls the window function called localStorage.removeItem() which takes 1 parameter "key". If remove("myKey") is called the data that was added before would be cleared from the storage.
7.wipe() - This is a method I would not use that many times. This function calls the window function called localStorage.clear() which takes no parameters. This function clears all the local storage data associated with the client on that domain.
Well, this is my Storage module. Hope you guys found it useful. Go ahead and try it out...
This content originally appeared on DEV Community and was authored by Sooraj
Sooraj | Sciencx (2021-06-26T13:50:40+00:00) Simple Javascript Modules – Local Storage Module. Retrieved from https://www.scien.cx/2021/06/26/simple-javascript-modules-local-storage-module/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.