storage-form Examples

storage-form is a custom element that can edit and store the values in some storages.

See HTML souce.

Basic usage

To enable storage-form, you need to register the custom storage-elements.

Then, you can edit and store the foo value in the localStorage.

Supported storages

the storage is selected by area attribute. The area attribute can be one of the following values:

local-storage
Use localStorage as a storage.
session-storage
Use sessionStorage as a storage.
chrome-local
Use chrome.storage.local as a storage.
chrome-sync
Use chrome.storage.sync as a storage.

Supported elements

Some elements are supported. You can use input, select, textarea and output elements.

The name attribute of the element is used as a key of the storage.

The below example shows the supported elements. These sources are in the storage-form element.

input type="text"

input type="checkbox"

if checked, the value of checkbox-sample1 is on, otherwise the value is deleted.

input type="radio"

If checked, the value of radio-sample is the value.

radio-sample:

And more...

type=color:

type=date:

textarea:

Note: type=button/submit/reset/image/hidden are ignored.

The value of elements are synchronized with the same "name"

If you have multiple elements with the same name, the value of the elements are synchronized.

The following example named foo elements are synchronized.

Note: input type=color and input type=range does not work right in the synchronization. They always force to set the default value, because these types can not set the unset value like empty string in type=date.

Switch attributes programmatically

You can switch the storage area with with javascript using storage-form#storageArea property.

And you can also switch the name of binding target of the storage entry storage-form#name property.



Support custom elements

You can use support custom elements for some utilities.

Mono storage inputs: storage-input, storage-select, storage-textarea, storage-output

storage-input is a custom element that is shorthand for the single <input> element in the storage-form.

The following example is the same as the above example:

storage-select, storage-textarea and storage-output are the same as storage-input.

Configurer for Storage Area: area-select, storage-area-select

You can change the stored area for the foo's value using an area-select element.


storage-area-select is not only the same as area-select, but also it is like a mono storage select element. So that it remembers the value in the storage.


Show the storage usage: storage-usage

You can show the storage usage using storage-usage element.

The storage-area attribute can be omitted, if storage-usage element was put in the storage-form element,

Storage: