https://github.com/gr2m/localstorage-tutorial

Build a simple HTML page that stores data in and renders data from localStorage
https://github.com/gr2m/localstorage-tutorial

Last synced: 4 months ago
JSON representation

Build a simple HTML page that stores data in and renders data from localStorage

• Host: GitHub
• URL: https://github.com/gr2m/localstorage-tutorial
• Owner: gr2m
• Created: 2016-07-20T06:47:53.000Z (almost 10 years ago)
• Default Branch: gh-pages
• Last Pushed: 2020-10-15T00:02:54.000Z (over 5 years ago)
• Last Synced: 2024-10-29T22:53:31.571Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://gr2m.github.io/localstorage-tutorial/step1/
• Size: 108 KB
• Stars: 4
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# localstorage-tutorial

> Build a simple HTML page that stores data in and renders data from localStorage

[![localstorage tutorial video](screenshot.png)](https://youtu.be/8jGDxNnx3HM)

This tutorial has 3 parts.

1. **No data storage**  

   Create an index.html file with a little bit of styling that shows a form to

   create a new contact, a table to show hardcoded contacts, and an edit form

   to edit existing contacts.

2. **Store data in localStorage**  

   Instead of showing hardcoded contacts, we store our contacts in localStorage

3. **contacts store API**  

   Instead of interacting with the `localStorage` API directly, we create a

   custom `contactsStore` API that abstracts away how contacts are stored.

I might add more steps or ideas for exercises in future.

## Work in Progress

- I’ve made a screencast of me coding step 1 & 2 and will upload it tomorrow

- For step 3, I suggest an API like this

  ```js

  contactsStore.add(contact).then(function (contact) {}).catch(function (error) {})

  contactsStore.findAll().then(function (contacts) {}).catch(function (error) {})

  contactsStore.update(contact).then(function (contact) {}).catch(function (error) {})

  contactsStore.remove(contact).then(function (contact) {}).catch(function (error) {})

  ```

  This API uses [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Here is a [short introduction](https://davidwalsh.name/promises). Note that [Promises can be tricky](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html).