An introduction to data storage using javascript with cookies and local storage.
Sometimes you want to remember something between page loads. Sometimes we save that data on the server, but for some applications we want to store it in the client.
For those use cases we have cookies or localStorage.
| Repository | javascript-storage-intro |
|---|---|
| Type of challenge | Learning |
| Duration | 1 day |
- What is storage?
- What can be stored
- Why and when should we store things
- The difference between client side storage and server side storage
- The difference between cookies and localStorage
- How to store something in a cookie
- How to read something from a cookie
- How to delete a cookie
- How to store something in localStorage
- How to read something from localStorage
- How to delete something from localStorage
- Look up what the difference is between localStorage and cookies
- Create an HTML page
- Create a repository
- Commit now, and often 😉
- Add an input element
- Whenever the user changes the text in the input field, save it in a cookie
- When the page gets loaded, put the content of the cookie in the input field
- Add another input field and do the same with localStorage
- Try out what the maximum amount of text is for each method
- In the developer tools, look at the request headers, what do you notice?
- Add a delete button for the cookie
- Add a delete buttn for the localStorage
-
For both the cookie and the localStorage
- add multiple input fields
- they should all individually work, so if I put something in the first input field for the cookie and something else in the second input field for the cookie, it should, when the user refreshes the page, fill in the field with what the user typed
-
Structure and style it nicely so it is clear which boxes are for cookies and which are for localStorage