├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── workflows
    │   └── npm-publish.yml
├── LICENSE
├── README.md
├── demo.html
├── package.json
└── storage-form.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | buy_me_a_coffee: daviddarnes
2 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: bug
 6 | assignees: daviddarnes
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behaviour:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behaviour**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: enhancement
 6 | assignees: daviddarnes
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Node.js Package
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [created]
 6 | 
 7 | jobs:
 8 |   publish-npm:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v3
12 |       - uses: actions/setup-node@v3
13 |         with:
14 |           node-version: 16
15 |           registry-url: https://registry.npmjs.org/
16 |       - run: npm install
17 |       - run: npm publish
18 |         env:
19 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 David Darnes
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # `storage-form`
  2 | 
  3 | A Web Component that allows you to submit data to local storage.
  4 | 
  5 | **[Demo](https://daviddarnes.github.io/storage-form/demo.html)** | **[Further reading](https://darn.es/storage-form-web-component/)**
  6 | 
  7 | ## Examples
  8 | 
  9 | General usage example:
 10 | 
 11 | ```html
 12 | <script type="module" src="storage-form.js"></script>
 13 | 
 14 | <storage-form>
 15 |   <form>
 16 |     <label>
 17 |       Example
 18 |       <input type="text" name="example" value="value" />
 19 |     </label>
 20 |     <button>Submit</button>
 21 |   </form>
 22 | </storage-form>
 23 | ```
 24 | 
 25 | Example of submitting with `change` event instead of a submit button. Use case for light/dark mode:
 26 | 
 27 | ```html
 28 | <script type="module" src="storage-form.js"></script>
 29 | 
 30 | <storage-form>
 31 |   <form>
 32 |     <label>
 33 |       <input type="radio" name="theme" value="dark" />
 34 |       <span>Dark mode</span>
 35 |     </label>
 36 |     <label>
 37 |       <input type="radio" name="theme" value="light" />
 38 |       <span>Light mode</span>
 39 |     </label>
 40 |     <label>
 41 |       <input type="radio" name="theme" value="" checked />
 42 |       <span>Default mode</span>
 43 |     </label>
 44 |     <br />
 45 |     <label>
 46 |       <input type="hidden" name="contrast" value />
 47 |       <input type="checkbox" name="contrast" value="true" />
 48 |       <span>High contrast</span>
 49 |     </label>
 50 |   </form>
 51 | </storage-form>
 52 | ```
 53 | 
 54 | Example of hooking into `storage` event:
 55 | 
 56 | ```html
 57 | <script type="module" src="storage-form.js"></script>
 58 | 
 59 | <storage-form>
 60 |   <form>
 61 |     <label>
 62 |       Update the
 63 |       <code>output</code>
 64 |       by checking the box
 65 |       <input type="hidden" name="output" value />
 66 |       <input type="checkbox" name="output" value="updated" />
 67 |     </label>
 68 |   </form>
 69 | </storage-form>
 70 | 
 71 | <output></output>
 72 | <script>
 73 |   const updatePage = () => {
 74 |     document.querySelector("output").innerHTML = JSON.stringify(
 75 |       window.localStorage
 76 |     );
 77 |   };
 78 |   window.addEventListener("storage", updatePage);
 79 |   updatePage();
 80 | </script>
 81 | ```
 82 | 
 83 | ## Features
 84 | 
 85 | This Web Component allows you to:
 86 | 
 87 | - Use regular form elements to manipulate data in local storage
 88 | - Invoke a `storage` event on the page to hook into elsewhere on the page
 89 | - Maintain the forms state, using local storage, when the page is refreshed or reloaded
 90 | - Optionally submit the form on the forms `change` event by omitting the forms submit button/input element
 91 | 
 92 | ## Installation
 93 | 
 94 | You have a few options (choose one of these):
 95 | 
 96 | 1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/storage-form): `npm install @daviddarnes/storage-form`
 97 | 1. [Download the source manually from GitHub](https://github.com/daviddarnes/storage-form/releases) into your project.
 98 | 1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
 99 | 
100 | ### Usage
101 | 
102 | Make sure you include the `<script>` in your project (choose one of these):
103 | 
104 | ```html
105 | <!-- Host yourself -->
106 | <script type="module" src="storage-form.js"></script>
107 | ```
108 | 
109 | ```html
110 | <!-- 3rd party CDN, not recommended for production use -->
111 | <script
112 |   type="module"
113 |   src="https://www.unpkg.com/@daviddarnes/storage-form@2.0.1/storage-form.js"
114 | ></script>
115 | ```
116 | 
117 | ```html
118 | <!-- 3rd party CDN, not recommended for production use -->
119 | <script
120 |   type="module"
121 |   src="https://esm.sh/@daviddarnes/storage-form@2.0.1"
122 | ></script>
123 | ```
124 | 
125 | ## Credit
126 | 
127 | With thanks to the following people:
128 | 
129 | - [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template)
130 | - [Nathan Knowler](https://knowler.dev) for proposing a solution to the `updateForm()` method
131 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta name="description" content="Demo of storage-form Web Component" />
  7 |     <title>storage-form Web Component Demo</title>
  8 | 
  9 |     <style>
 10 |       :root {
 11 |         color-scheme: light dark;
 12 |       }
 13 | 
 14 |       :root:has([value="dark"]:checked) {
 15 |         color-scheme: dark;
 16 |       }
 17 | 
 18 |       :root:has([value="light"]:checked) {
 19 |         color-scheme: light;
 20 |       }
 21 | 
 22 |       :root:has([name="contrast"]:checked) {
 23 |         font-weight: bold;
 24 |       }
 25 | 
 26 |       output {
 27 |         font-family: monospace;
 28 |       }
 29 |     </style>
 30 | 
 31 |     <script type="module" src="storage-form.js"></script>
 32 |   </head>
 33 |   <body>
 34 |     <h2>General example</h2>
 35 |     <storage-form>
 36 |       <form>
 37 |         <label>
 38 |           Example
 39 |           <input type="text" name="example" value="value" />
 40 |         </label>
 41 |         <button>Submit</button>
 42 |       </form>
 43 |     </storage-form>
 44 | 
 45 |     <hr />
 46 | 
 47 |     <h2>
 48 |       Example of submitting with
 49 |       <code>change</code>
 50 |       event instead of a submit button
 51 |     </h2>
 52 |     <p>Use case for light/dark mode.</p>
 53 |     <storage-form>
 54 |       <form>
 55 |         <label>
 56 |           <input type="radio" name="theme" value="dark" />
 57 |           <span>Dark mode</span>
 58 |         </label>
 59 |         <label>
 60 |           <input type="radio" name="theme" value="light" />
 61 |           <span>Light mode</span>
 62 |         </label>
 63 |         <label>
 64 |           <input type="radio" name="theme" value="" checked />
 65 |           <span>Default mode</span>
 66 |         </label>
 67 |         <br />
 68 |         <label>
 69 |           <input type="hidden" name="contrast" value />
 70 |           <input type="checkbox" name="contrast" value="true" />
 71 |           <span>High contrast</span>
 72 |         </label>
 73 |       </form>
 74 |     </storage-form>
 75 | 
 76 |     <hr />
 77 | 
 78 |     <h2>
 79 |       Example of hooking into
 80 |       <code>storage</code>
 81 |       event
 82 |     </h2>
 83 | 
 84 |     <storage-form>
 85 |       <form>
 86 |         <label>
 87 |           Update the
 88 |           <code>output</code>
 89 |           by checking the box
 90 |           <input type="hidden" name="output" value />
 91 |           <input type="checkbox" name="output" value="updated" />
 92 |         </label>
 93 |       </form>
 94 |     </storage-form>
 95 | 
 96 |     <output></output>
 97 |     <script>
 98 |       const updatePage = () => {
 99 |         document.querySelector("output").innerHTML = JSON.stringify(
100 |           window.localStorage
101 |         );
102 |       };
103 |       window.addEventListener("storage", updatePage);
104 |       updatePage();
105 |     </script>
106 |   </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@daviddarnes/storage-form",
 3 |   "version": "2.0.1",
 4 |   "description": "A Web Component that allows you to submit data to local storage",
 5 |   "main": "storage-form.js",
 6 |   "scripts": {
 7 |     "start": "npx http-server ."
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/daviddarnes/storage-form.git"
12 |   },
13 |   "keywords": [
14 |     "web",
15 |     "component",
16 |     "components",
17 |     "web components",
18 |     "custom elements"
19 |   ],
20 |   "license": "MIT",
21 |   "publishConfig": {
22 |     "access": "public"
23 |   },
24 |   "bugs": {
25 |     "url": "https://github.com/daviddarnes/storage-form/issues"
26 |   },
27 |   "author": {
28 |     "name": "David Darnes",
29 |     "email": "me@daviddarnes.com",
30 |     "url": "https://darn.es/"
31 |   },
32 |   "homepage": "https://github.com/daviddarnes/storage-form#readme"
33 | }
34 | 


--------------------------------------------------------------------------------
/storage-form.js:
--------------------------------------------------------------------------------
 1 | class StorageForm extends HTMLElement {
 2 |   static register(tagName) {
 3 |     if ("customElements" in window) {
 4 |       customElements.define(tagName || "storage-form", StorageForm);
 5 |     }
 6 |   }
 7 | 
 8 |   connectedCallback() {
 9 |     this.forms.forEach((form) => {
10 |       this.updateForm(form);
11 |       const eventType = this.getSubmitter(form) ? "submit" : "change";
12 |       form.addEventListener(eventType, (event) => {
13 |         event.preventDefault();
14 |         this.updateStorage(new FormData(event.target.closest("form")));
15 |         window.dispatchEvent(new StorageEvent("storage"));
16 |       });
17 |     });
18 |   }
19 | 
20 |   updateForm(form) {
21 |     this.getNamedInputs(form).forEach((input) => {
22 |       const storedValue = window.localStorage[input.name];
23 |       if (!storedValue) return;
24 |       switch (input.type) {
25 |         case "hidden":
26 |           break;
27 |         case "checkbox":
28 |         case "radio":
29 |           input.checked = input.value == storedValue;
30 |           break;
31 |         default:
32 |           input.value = storedValue;
33 |       }
34 |     });
35 |   }
36 | 
37 |   updateStorage(data) {
38 |     for (const item of data.entries()) {
39 |       if (!item[1]) {
40 |         window.localStorage.removeItem(item[0]);
41 |       } else {
42 |         window.localStorage.setItem(item[0], item[1]);
43 |       }
44 |     }
45 |   }
46 | 
47 |   get forms() {
48 |     return this.querySelectorAll("form");
49 |   }
50 | 
51 |   getNamedInputs(form) {
52 |     return form.querySelectorAll("[name]");
53 |   }
54 | 
55 |   getSubmitter(form) {
56 |     return form.querySelector("[type='submit'], button:not([type])");
57 |   }
58 | }
59 | 
60 | StorageForm.register();
61 | 


--------------------------------------------------------------------------------