Sometimes, life comes at you hard! and you fall behind with commitments like work/school. But instead of giving up, you lean into the discomfort and pick up where you left off. Over the past few weeks, I have been learning about CRUD
(Create, Read, Update, Delete), and file upload/ reading and writing using PHP
as part of the PE curriculum.
I chose this starting point because I needed to learn how to save data so I can create dynamic sites (data tailored to each user) instead of the many static websites I created. I managed to put together a CRUD
bread recipe database with image upload using PHP
. I also created a to-do app with a login system, where you have to log in to be allowed access to CRUD
the data.
Growing tired of the setup that comes with PHP (having to run a local server like MAMP) and programming on the server, I wanted to see if there was a way to save data locally/in the browser also called the client. Thankfully I got some help from two of my favorite organizations- Perpetual Education (PE) and Mozilla Developer Network (MDN). This is where I learned about the concept of local storage.
Local what?
Local storage, typed as localStorage
is an object on the Window
object in the browser. It is a way to store data in the browser (locally) for the user. Since it is an object (with methods, as we’ll soon see) data is stored as key: value pairs where both the key: value are strings. When data is saved and retrieved from localStorage
, it persists (exists) even when you close and reopen the web browser.
In my todo-app project, I used localStorage along with DOM (Document Object Model) to CRUD. However, the terminology for the localStorage API (application programming interface), a set of rules for how software interacts is different. It uses methods like getItem()
to read, setItem()
to create/update an item, removeItem()
to delete an item and clear()
to manually clear (permanently delete) the local storage object.
Preparing the data
Before you start saving data to localStorage
, you need to know two things.
The type of data
localStorage
can store (strings)The type of data you’re working with
In my to-do app, I was working with an array of objects. Because of the data limitations of localStorage, I had to make the array
into a JSON string using JSON.stringify(arrayOfStrings)
. The final code would be localStorage.set(“todos“, JSON.stringify(arrayOfStrings));
Because localStorage
is an API with many methods, and localStorage is long enough to type without the associated methods like localStorage.set(“todos“, JSON.stringify(arrayOfStrings))
many Developers (myself included) find it helpful to create some utility functions.
A utility function is just a function that performs a certain utility/task. In this case, setting a value as a string to localStorage
. We will create other functions that represent different actions in the localStorage
API, as you’ll see below.
Utility functions
Building on the to-do app example, let’s say you have an array of objects. Each object has an id key
(the value is a randomly generated number) and a todo
key. The todo key
’s value is coming in from a form element and is grabbed using DOM methods and event listeners, all of which are outside the scope of this blog post.
All that is important is that you understand we are working with an array (which is really an object) and turning it into a string as we set it with an assigned key in the localStorage
object. Now let’s look at some other utility functions I used.
let todos = []; //this array is populated with an object each time the form submit button is clicked
function setTodos(todos) {
localStorage.setItem("todos", JSON.stringify(todos)); //set an item with "todos" key and an array as a string in JSON format as its value.
}
function getTodos() {
return JSON.parse(localStorage.getItem("todos")); //return the items with key "todos" back into its original data structure. In this case an array
}
function clearLocalStorage() {
localStorage.clear(); //clear local storage
}
function deleteTodos(item) {
localStorage.removeItem(item); // remove item with name "key" from localStorage
}
It’s important to note that to delete data from the todos array, I didn’t use a function like deleteTodos
. Since I am working with an array of data and updating/deleting it based on if it matches the correct id in the DOM, I would have used an array method like splice() to delete the object from the todos
array.
Viewing data
Like any other Object/variable, you can interact with the localStorage object in the JavaScript console. You can also inspect it by clicking the Application tab in Chrome (and navigate to the storage sub-tab), and Storage in Firefox to see the current contents of local storage. In the screenshot you can see the contents of local storage are an array with a single object (with an id
and todo
key/value pair) in it.
Have you ever used local storage? What are the upsides and downsides of it, and what are some alternatives? Let me know in the comments.
Resources
Code
CodePen- Marco's Todo App