FormStorage – A JavaScript library stores the form-data to the localstorage and retrieves t…

综合编程 2018-05-16 阅读原文

Quick start

Using CDN

You can easily start by using CDN.

Add the following description in the
tag of the web page you want to use FormStorage.

You can also bundle the library with Browserify/Webpack

npm install form-storage --save
import FormStorage from 'form-storage'

Wrap the elements you want to apply ScrollSuggest like below

Write the following script

new FormStorage('.js-scrollable', {
  name: 'form-storage', //localstorage name
  ignores: [ // The selectors specified here, won't be stored in the storage.
    '[type="password"]'
  ],
  checkbox: '.js-persist' //if the selector specified here is checked, the form data will be stored.
});

Options

Some options are available when making new instances like below.

var storage = new FormStorage('.js-scrollable', {
  name: 'form-storage', //localstorage name
  ignores: [ // The selectors specified here, won't be stored in the storage.
    '[type="password"]', '.js-ignore'
  ],
  checkbox: '.js-persist' //if the selector specified here is checked, the form data will be stored.
});

For your reference, below is the list of the options available.

NameDefaultDescription
name'form'localstorage name to be used
ignores[]Selectors which won't be saved on the storage
includes[]When specified, only selectors specified here will be saved
checkboxnull When this checkbox is checked, the form data will be saved before submitting
and the form data will be restored when the page is loaded.

Methods

You can also use some methods from the instances like below

var storage = new FormStorage('.js-scrollable', {
  name: 'form-storage', //localstorage name
  ignores: [ // The selectors specified here, won't be stored in the storage.
    '[type="password"]', '.js-ignore'
  ],
  checkbox: '.js-persist' //if the selector specified here is checked, the form data will be stored.
});
storage.save(); //using the method
NameDescription
saveSave the form-data on the localstorage
applyFill the form from the localstorage
clearRemove the localstorage

Join development on

GitHub

License

Echo JS

责编内容by:Echo JS阅读原文】。感谢您的支持!

您可能感兴趣的

页面刷新vuex数据消失问题解决方案 VBox持续进行中,哀家苦啊,有没有谁给个star。 vuex是vue用于数据存储的,和redux充当同样的角色。 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。 网上搜,大家...
使用FileReader进行文件读取 最近在做的一个项目,需要读取用户上传的文件并进行本地存储,学习了一下FileReader。 本文简单介绍了FileReader以及两个FileReader的使用场景:文件读取和图片预览。 DEMO: https:...
Save your Viewpoint for another day! Posted injavascript As developers, sometimes we’re asked to do something weird. Ok, maybe weird isn’t the right te...
使用localStorage实现浏览器页面之间的通信(更新别的页面)... 需求场景 我们打开了两个需要登录的页面。我们在其中一个页面登录成功了,现在是想能够把已登陆的状态通知另外一个页面,让它自动更新。 实现方案 我们可以使用html5的localStorage来实现同一个浏览器页面之间的通信。 ...
HTML5 sessionStorage and localStorage Web Storage is an HTML 5 feature that enables JavaScript to store and retrieve data in the browser application itself. ...