{"id":25614513,"url":"https://github.com/geoffreycrofte/form-saver","last_synced_at":"2025-04-13T20:05:49.683Z","repository":{"id":39787379,"uuid":"108978292","full_name":"geoffreycrofte/form-saver","owner":"geoffreycrofte","description":"Form Saver makes your users experience more friendly by saving locally the datas they provide and pre-filled the form in case of browser crash.","archived":false,"fork":false,"pushed_at":"2023-01-10T22:26:19.000Z","size":142,"stargazers_count":14,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-01T22:16:16.598Z","etag":null,"topics":["browser-crash","data","form","javascript","localstorage","saving","vanilla"],"latest_commit_sha":null,"homepage":"https://geoffreycrofte.github.io/form-saver/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geoffreycrofte.png","metadata":{"files":{"readme":"readme.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-31T10:11:30.000Z","updated_at":"2024-05-01T22:16:16.599Z","dependencies_parsed_at":"2023-02-08T20:30:28.859Z","dependency_job_id":null,"html_url":"https://github.com/geoffreycrofte/form-saver","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geoffreycrofte%2Fform-saver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geoffreycrofte%2Fform-saver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geoffreycrofte%2Fform-saver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geoffreycrofte%2Fform-saver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geoffreycrofte","download_url":"https://codeload.github.com/geoffreycrofte/form-saver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240114328,"owners_count":19749838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-crash","data","form","javascript","localstorage","saving","vanilla"],"created_at":"2025-02-22T02:20:17.397Z","updated_at":"2025-02-22T02:20:18.016Z","avatar_url":"https://github.com/geoffreycrofte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003cstyle\u003e\n        @font-face {\n            font-family: octicons-anchor;\n            src: url(https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.woff) format('woff');\n        }\n        \n        * {\n            box-sizing: border-box;\n        }\n        \n        body {\n            width: 980px;\n            margin-right: auto;\n            margin-left: auto;\n            color: #333;\n            background: #fff;\n        }\n        \n        body .markdown-body {\n            padding: 45px;\n            border: 1px solid #ddd;\n            border-radius: 3px;\n            word-wrap: break-word;\n        }\n        \n        pre {\n            font: 12px Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n        }\n        \n        .markdown-body {\n            -webkit-text-size-adjust: 100%;\n            text-size-adjust: 100%;\n            color: #333;\n            font-family: \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n            font-size: 16px;\n            line-height: 1.6;\n            word-wrap: break-word;\n        }\n        \n        .markdown-body a {\n            background-color: transparent;\n        }\n        \n        .markdown-body a:active,\n        .markdown-body a:hover {\n            outline: 0;\n        }\n        \n        .markdown-body strong {\n            font-weight: bold;\n        }\n        \n        .markdown-body h1 {\n            font-size: 2em;\n            margin: 0.67em 0;\n        }\n        \n        .markdown-body img {\n            border: 0;\n        }\n        \n        .markdown-body hr {\n            box-sizing: content-box;\n            height: 0;\n        }\n        \n        .markdown-body pre {\n            overflow: auto;\n        }\n        \n        .markdown-body code,\n        .markdown-body kbd,\n        .markdown-body pre {\n            font-family: monospace, monospace;\n            font-size: 1em;\n        }\n        \n        .markdown-body input {\n            color: inherit;\n            font: inherit;\n            margin: 0;\n        }\n        \n        .markdown-body html input[disabled] {\n            cursor: default;\n        }\n        \n        .markdown-body input {\n            line-height: normal;\n        }\n        \n        .markdown-body input[type=\"checkbox\"] {\n            box-sizing: border-box;\n            padding: 0;\n        }\n        \n        .markdown-body table {\n            border-collapse: collapse;\n            border-spacing: 0;\n        }\n        \n        .markdown-body td,\n        .markdown-body th {\n            padding: 0;\n        }\n        \n        .markdown-body input {\n            font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n        }\n        \n        .markdown-body a {\n            color: #4078c0;\n            text-decoration: none;\n        }\n        \n        .markdown-body a:hover,\n        .markdown-body a:active {\n            text-decoration: underline;\n        }\n        \n        .markdown-body hr {\n            height: 0;\n            margin: 15px 0;\n            overflow: hidden;\n            background: transparent;\n            border: 0;\n            border-bottom: 1px solid #ddd;\n        }\n        \n        .markdown-body hr:before {\n            display: table;\n            content: \"\";\n        }\n        \n        .markdown-body hr:after {\n            display: table;\n            clear: both;\n            content: \"\";\n        }\n        \n        .markdown-body h1,\n        .markdown-body h2,\n        .markdown-body h3,\n        .markdown-body h4,\n        .markdown-body h5,\n        .markdown-body h6 {\n            margin-top: 15px;\n            margin-bottom: 15px;\n            line-height: 1.1;\n        }\n        \n        .markdown-body h1 {\n            font-size: 30px;\n        }\n        \n        .markdown-body h2 {\n            font-size: 21px;\n        }\n        \n        .markdown-body h3 {\n            font-size: 16px;\n        }\n        \n        .markdown-body h4 {\n            font-size: 14px;\n        }\n        \n        .markdown-body h5 {\n            font-size: 12px;\n        }\n        \n        .markdown-body h6 {\n            font-size: 11px;\n        }\n        \n        .markdown-body blockquote {\n            margin: 0;\n        }\n        \n        .markdown-body ul,\n        .markdown-body ol {\n            padding: 0;\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n        \n        .markdown-body ol ol,\n        .markdown-body ul ol {\n            list-style-type: lower-roman;\n        }\n        \n        .markdown-body ul ul ol,\n        .markdown-body ul ol ol,\n        .markdown-body ol ul ol,\n        .markdown-body ol ol ol {\n            list-style-type: lower-alpha;\n        }\n        \n        .markdown-body dd {\n            margin-left: 0;\n        }\n        \n        .markdown-body code {\n            font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n            font-size: 12px;\n        }\n        \n        .markdown-body pre {\n            margin-top: 0;\n            margin-bottom: 0;\n            font: 12px Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n        }\n        \n        .markdown-body .select::-ms-expand {\n            opacity: 0;\n        }\n        \n        .markdown-body .octicon {\n            font: normal normal normal 16px/1 octicons-anchor;\n            display: inline-block;\n            text-decoration: none;\n            text-rendering: auto;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n        \n        .markdown-body .octicon-link:before {\n            content: '\\f05c';\n        }\n        \n        .markdown-body:before {\n            display: table;\n            content: \"\";\n        }\n        \n        .markdown-body:after {\n            display: table;\n            clear: both;\n            content: \"\";\n        }\n        \n        .markdown-body\u003e*:first-child {\n            margin-top: 0 !important;\n        }\n        \n        .markdown-body\u003e*:last-child {\n            margin-bottom: 0 !important;\n        }\n        \n        .markdown-body a:not([href]) {\n            color: inherit;\n            text-decoration: none;\n        }\n        \n        .markdown-body .anchor {\n            display: inline-block;\n            padding-right: 2px;\n            margin-left: -18px;\n        }\n        \n        .markdown-body .anchor:focus {\n            outline: none;\n        }\n        \n        .markdown-body h1,\n        .markdown-body h2,\n        .markdown-body h3,\n        .markdown-body h4,\n        .markdown-body h5,\n        .markdown-body h6 {\n            margin-top: 1em;\n            margin-bottom: 16px;\n            font-weight: bold;\n            line-height: 1.4;\n        }\n        \n        .markdown-body h1 .octicon-link,\n        .markdown-body h2 .octicon-link,\n        .markdown-body h3 .octicon-link,\n        .markdown-body h4 .octicon-link,\n        .markdown-body h5 .octicon-link,\n        .markdown-body h6 .octicon-link {\n            color: #000;\n            vertical-align: middle;\n            visibility: hidden;\n        }\n        \n        .markdown-body h1:hover .anchor,\n        .markdown-body h2:hover .anchor,\n        .markdown-body h3:hover .anchor,\n        .markdown-body h4:hover .anchor,\n        .markdown-body h5:hover .anchor,\n        .markdown-body h6:hover .anchor {\n            text-decoration: none;\n        }\n        \n        .markdown-body h1:hover .anchor .octicon-link,\n        .markdown-body h2:hover .anchor .octicon-link,\n        .markdown-body h3:hover .anchor .octicon-link,\n        .markdown-body h4:hover .anchor .octicon-link,\n        .markdown-body h5:hover .anchor .octicon-link,\n        .markdown-body h6:hover .anchor .octicon-link {\n            visibility: visible;\n        }\n        \n        .markdown-body h1 {\n            padding-bottom: 0.3em;\n            font-size: 2.25em;\n            line-height: 1.2;\n            border-bottom: 1px solid #eee;\n        }\n        \n        .markdown-body h1 .anchor {\n            line-height: 1;\n        }\n        \n        .markdown-body h2 {\n            padding-bottom: 0.3em;\n            font-size: 1.75em;\n            line-height: 1.225;\n            border-bottom: 1px solid #eee;\n        }\n        \n        .markdown-body h2 .anchor {\n            line-height: 1;\n        }\n        \n        .markdown-body h3 {\n            font-size: 1.5em;\n            line-height: 1.43;\n        }\n        \n        .markdown-body h3 .anchor {\n            line-height: 1.2;\n        }\n        \n        .markdown-body h4 {\n            font-size: 1.25em;\n        }\n        \n        .markdown-body h4 .anchor {\n            line-height: 1.2;\n        }\n        \n        .markdown-body h5 {\n            font-size: 1em;\n        }\n        \n        .markdown-body h5 .anchor {\n            line-height: 1.1;\n        }\n        \n        .markdown-body h6 {\n            font-size: 1em;\n            color: #777;\n        }\n        \n        .markdown-body h6 .anchor {\n            line-height: 1.1;\n        }\n        \n        .markdown-body p,\n        .markdown-body blockquote,\n        .markdown-body ul,\n        .markdown-body ol,\n        .markdown-body dl,\n        .markdown-body table,\n        .markdown-body pre {\n            margin-top: 0;\n            margin-bottom: 16px;\n        }\n        \n        .markdown-body hr {\n            height: 4px;\n            padding: 0;\n            margin: 16px 0;\n            background-color: #e7e7e7;\n            border: 0 none;\n        }\n        \n        .markdown-body ul,\n        .markdown-body ol {\n            padding-left: 2em;\n        }\n        \n        .markdown-body ul ul,\n        .markdown-body ul ol,\n        .markdown-body ol ol,\n        .markdown-body ol ul {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n        \n        .markdown-body li\u003ep {\n            margin-top: 16px;\n        }\n        \n        .markdown-body dl {\n            padding: 0;\n        }\n        \n        .markdown-body dl dt {\n            padding: 0;\n            margin-top: 16px;\n            font-size: 1em;\n            font-style: italic;\n            font-weight: bold;\n        }\n        \n        .markdown-body dl dd {\n            padding: 0 16px;\n            margin-bottom: 16px;\n        }\n        \n        .markdown-body blockquote {\n            padding: 0 15px;\n            color: #777;\n            border-left: 4px solid #ddd;\n        }\n        \n        .markdown-body blockquote\u003e:first-child {\n            margin-top: 0;\n        }\n        \n        .markdown-body blockquote\u003e:last-child {\n            margin-bottom: 0;\n        }\n        \n        .markdown-body table {\n            display: block;\n            width: 100%;\n            overflow: auto;\n            word-break: normal;\n            word-break: keep-all;\n        }\n        \n        .markdown-body table th {\n            font-weight: bold;\n        }\n        \n        .markdown-body table th,\n        .markdown-body table td {\n            padding: 6px 13px;\n            border: 1px solid #ddd;\n        }\n        \n        .markdown-body table tr {\n            background-color: #fff;\n            border-top: 1px solid #ccc;\n        }\n        \n        .markdown-body table tr:nth-child(2n) {\n            background-color: #f8f8f8;\n        }\n        \n        .markdown-body img {\n            max-width: 100%;\n            box-sizing: content-box;\n            background-color: #fff;\n        }\n        \n        .markdown-body code {\n            padding: 0;\n            padding-top: 0.2em;\n            padding-bottom: 0.2em;\n            margin: 0;\n            font-size: 85%;\n            background-color: rgba(0, 0, 0, 0.04);\n            border-radius: 3px;\n        }\n        \n        .markdown-body code:before,\n        .markdown-body code:after {\n            letter-spacing: -0.2em;\n            content: \"\\00a0\";\n        }\n        \n        .markdown-body pre\u003ecode {\n            padding: 0;\n            margin: 0;\n            font-size: 100%;\n            word-break: normal;\n            white-space: pre;\n            background: transparent;\n            border: 0;\n        }\n        \n        .markdown-body .highlight {\n            margin-bottom: 16px;\n        }\n        \n        .markdown-body .highlight pre,\n        .markdown-body pre {\n            padding: 16px;\n            overflow: auto;\n            font-size: 85%;\n            line-height: 1.45;\n            background-color: #f7f7f7;\n            border-radius: 3px;\n        }\n        \n        .markdown-body .highlight pre {\n            margin-bottom: 0;\n            word-break: normal;\n        }\n        \n        .markdown-body pre {\n            word-wrap: normal;\n        }\n        \n        .markdown-body pre code {\n            display: inline;\n            max-width: initial;\n            padding: 0;\n            margin: 0;\n            overflow: initial;\n            line-height: inherit;\n            word-wrap: normal;\n            background-color: transparent;\n            border: 0;\n        }\n        \n        .markdown-body pre code:before,\n        .markdown-body pre code:after {\n            content: normal;\n        }\n        \n        .markdown-body kbd {\n            display: inline-block;\n            padding: 3px 5px;\n            font-size: 11px;\n            line-height: 10px;\n            color: #555;\n            vertical-align: middle;\n            background-color: #fcfcfc;\n            border: solid 1px #ccc;\n            border-bottom-color: #bbb;\n            border-radius: 3px;\n            box-shadow: inset 0 -1px 0 #bbb;\n        }\n        \n        .markdown-body .pl-c {\n            color: #969896;\n        }\n        \n        .markdown-body .pl-c1,\n        .markdown-body .pl-s .pl-v {\n            color: #0086b3;\n        }\n        \n        .markdown-body .pl-e,\n        .markdown-body .pl-en {\n            color: #795da3;\n        }\n        \n        .markdown-body .pl-s .pl-s1,\n        .markdown-body .pl-smi {\n            color: #333;\n        }\n        \n        .markdown-body .pl-ent {\n            color: #63a35c;\n        }\n        \n        .markdown-body .pl-k {\n            color: #a71d5d;\n        }\n        \n        .markdown-body .pl-pds,\n        .markdown-body .pl-s,\n        .markdown-body .pl-s .pl-pse .pl-s1,\n        .markdown-body .pl-sr,\n        .markdown-body .pl-sr .pl-cce,\n        .markdown-body .pl-sr .pl-sra,\n        .markdown-body .pl-sr .pl-sre {\n            color: #183691;\n        }\n        \n        .markdown-body .pl-v {\n            color: #ed6a43;\n        }\n        \n        .markdown-body .pl-id {\n            color: #b52a1d;\n        }\n        \n        .markdown-body .pl-ii {\n            background-color: #b52a1d;\n            color: #f8f8f8;\n        }\n        \n        .markdown-body .pl-sr .pl-cce {\n            color: #63a35c;\n            font-weight: bold;\n        }\n        \n        .markdown-body .pl-ml {\n            color: #693a17;\n        }\n        \n        .markdown-body .pl-mh,\n        .markdown-body .pl-mh .pl-en,\n        .markdown-body .pl-ms {\n            color: #1d3e81;\n            font-weight: bold;\n        }\n        \n        .markdown-body .pl-mq {\n            color: #008080;\n        }\n        \n        .markdown-body .pl-mi {\n            color: #333;\n            font-style: italic;\n        }\n        \n        .markdown-body .pl-mb {\n            color: #333;\n            font-weight: bold;\n        }\n        \n        .markdown-body .pl-md {\n            background-color: #ffecec;\n            color: #bd2c00;\n        }\n        \n        .markdown-body .pl-mi1 {\n            background-color: #eaffea;\n            color: #55a532;\n        }\n        \n        .markdown-body .pl-mdr {\n            color: #795da3;\n            font-weight: bold;\n        }\n        \n        .markdown-body .pl-mo {\n            color: #1d3e81;\n        }\n        \n        .markdown-body kbd {\n            display: inline-block;\n            padding: 3px 5px;\n            font: 11px Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n            line-height: 10px;\n            color: #555;\n            vertical-align: middle;\n            background-color: #fcfcfc;\n            border: solid 1px #ccc;\n            border-bottom-color: #bbb;\n            border-radius: 3px;\n            box-shadow: inset 0 -1px 0 #bbb;\n        }\n        \n        .markdown-body .plan-price-unit {\n            color: #767676;\n            font-weight: normal;\n        }\n        \n        .markdown-body .task-list-item {\n            list-style-type: none;\n        }\n        \n        .markdown-body .task-list-item+.task-list-item {\n            margin-top: 3px;\n        }\n        \n        .markdown-body .task-list-item input {\n            margin: 0 0.35em 0.25em -1.6em;\n            vertical-align: middle;\n        }\n        \n        .markdown-body .plan-choice {\n            padding: 15px;\n            padding-left: 40px;\n            display: block;\n            border: 1px solid #e0e0e0;\n            position: relative;\n            font-weight: normal;\n            background-color: #fafafa;\n        }\n        \n        .markdown-body .plan-choice.open {\n            background-color: #fff;\n        }\n        \n        .markdown-body .plan-choice.open .plan-choice-seat-breakdown {\n            display: block;\n        }\n        \n        .markdown-body .plan-choice-free {\n            border-radius: 3px 3px 0 0;\n        }\n        \n        .markdown-body .plan-choice-paid {\n            border-radius: 0 0 3px 3px;\n            border-top: 0;\n            margin-bottom: 20px;\n        }\n        \n        .markdown-body .plan-choice-radio {\n            position: absolute;\n            left: 15px;\n            top: 18px;\n        }\n        \n        .markdown-body .plan-choice-exp {\n            color: #999;\n            font-size: 12px;\n            margin-top: 5px;\n        }\n        \n        .markdown-body .plan-choice-seat-breakdown {\n            margin-top: 10px;\n            display: none;\n        }\n        \n        .markdown-body:checked+.radio-label {\n            z-index: 1;\n            position: relative;\n            border-color: #4078c0;\n        }\n        \n        @media print {\n            body .markdown-body {\n                padding: 0;\n                border: none;\n            }\n        }\n    \u003c/style\u003e\n    \u003ctitle\u003ereadme\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003carticle class=\"markdown-body\"\u003e\n        \u003ch1\u003e\n\u003ca id=\"user-content-form-saver\" class=\"anchor\" href=\"#form-saver\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eForm Saver\u003c/h1\u003e\n        \u003cp\u003eFS (Form Saver) is made to save your users time while filling short or long forms. It uses localStorage (by default) to register locally datas given by the user while completing your page forms. In case of browser crash, the script re-fill forms (automatically or by asking to user depending on you settings, again) to avoid user frustration.\u003c/p\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-how-to-use-it\" class=\"anchor\" href=\"#how-to-use-it\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eHow to use it\u003c/h2\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-to-start\" class=\"anchor\" href=\"#to-start\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eTo start\u003c/h3\u003e\n        \u003cp\u003eFirst of all, you need to get the \u003ccode\u003esrc\u003c/code\u003e folder content. Choose your own way to do so (clone this repository, download it manually, choose a dependencies manager, etc.)\u003c/p\u003e\n        \u003cp\u003eThen link the script to your document, the one with a form to save, putting those lines of code before the \u003ccode\u003e\u0026lt;/body\u0026gt;\u003c/code\u003e tag.\u003c/p\u003e\n        \u003cdiv class=\"highlight highlight-text-html-basic\"\u003e\u003cpre\u003e\u0026lt;\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-e\"\u003esrc\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e/assets/src/form-saver.min.js\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\u0026lt;/\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u0026gt;\n\u0026lt;\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-s1\"\u003e\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003e  \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efs\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eFormSaver\u003c/span\u003e( \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003emyform\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e );\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003e  \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003einit\u003c/span\u003e();\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003e\u003c/span\u003e\u0026lt;/\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u0026gt;\u003c/pre\u003e\u003c/div\u003e\n        \u003cp\u003eReplace \u003ccode\u003e/assets/src/\u003c/code\u003e by the right folder, and remove \u003ccode\u003e.min\u003c/code\u003e from the file name if you need to test things in development. Keep \u003ccode\u003e.min\u003c/code\u003e to get the minified version which is better for performance.\u003c/p\u003e\n        \u003cp\u003e\u003ccode\u003emyform\u003c/code\u003e is the \u003ccode\u003eid\u003c/code\u003e or \u003ccode\u003ename\u003c/code\u003e attribute value of the form you need to declare before initiating the script.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-optional-arguments\" class=\"anchor\" href=\"#optional-arguments\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eOptional arguments\u003c/h3\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efs\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eFormSaver\u003c/span\u003e( \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003emyform\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e, {\n  storageType     \u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003elocal\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e,\n  storageID       \u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003eID123\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e,\n  storageDuration \u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e30\u003c/span\u003e, \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e not supported yet.\u003c/span\u003e\n} );\u003c/pre\u003e\u003c/div\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-multiple-forms-to-save\" class=\"anchor\" href=\"#multiple-forms-to-save\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eMultiple forms to save\u003c/h3\u003e\n        \u003cp\u003eIn case you need to save multiple form, or have a generic way to declare FormSaver on complexe forms (yeah remember not to use FormSaver on small forms, it's really not necessary), this is an example of code.\u003c/p\u003e\n        \u003cdiv class=\"highlight highlight-text-html-basic\"\u003e\u003cpre\u003e\u0026lt;\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e \u003cspan class=\"pl-e\"\u003esrc\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e/assets/src/form-saver.min.js\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\u0026lt;/\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u0026gt;\n\u0026lt;\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-s1\"\u003e\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003e  \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efs\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eFormSaver\u003c/span\u003e( \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003emyform\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e );\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003e  \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003einit\u003c/span\u003e();\u003c/span\u003e\n\u003cspan class=\"pl-s1\"\u003e\u003c/span\u003e\u0026lt;/\u003cspan class=\"pl-ent\"\u003escript\u003c/span\u003e\u0026gt;\u003c/pre\u003e\u003c/div\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-api--methods\" class=\"anchor\" href=\"#api--methods\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eAPI / Methods\u003c/h3\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ccode\u003einit\u003c/code\u003e\n                \u003cbr\u003eThe only way to make Form Saver work.\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efs\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-k\"\u003enew\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eFormSaver\u003c/span\u003e( \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003eform-name\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e );\n\u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003einit\u003c/span\u003e();\u003c/pre\u003e\u003c/div\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ccode\u003estop\u003c/code\u003e/\u003ccode\u003epause\u003c/code\u003e\n                \u003cbr\u003eStop Form Saver saving the value of your form fields.\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e ( \u003cspan class=\"pl-en\"\u003esomethingHappens\u003c/span\u003e() ) {\n  \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003epause\u003c/span\u003e();\n}\u003c/pre\u003e\u003c/div\u003e\n        \u003cp\u003eIf you need to save things after a stop/pause, just use \u003ccode\u003einit()\u003c/code\u003e method.\u003c/p\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e ( \u003cspan class=\"pl-en\"\u003eIneedToSaveAgain\u003c/span\u003e() ) {\n  \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003einit\u003c/span\u003e();\n}\u003c/pre\u003e\u003c/div\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ccode\u003esave\u003c/code\u003e\n                \u003cbr\u003eSave all the fields of your form.\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003esetInterval\u003c/span\u003e( \u003cspan class=\"pl-k\"\u003efunction\u003c/span\u003e(){\n  \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esave\u003c/span\u003e();\n}, \u003cspan class=\"pl-c1\"\u003e10000\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n        \u003cp\u003eWhen you want to save all the form field every 10s. Be careful with the performance, that's not ideal. Oftentime you need this when you enter in a long duration edition in a textarea or similar. Try to trigger this interval at the right time and clear it as soon as you don't need it.\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ccode\u003edestroy\u003c/code\u003e\n                \u003cbr\u003eDestroy all datas stored.\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e ( \u003cspan class=\"pl-en\"\u003esomethingHappens\u003c/span\u003e() ) {\n  \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003edestroy\u003c/span\u003e();\n}\u003c/pre\u003e\u003c/div\u003e\n        \u003cp\u003eUse it when you don't need datas anymore. \u003cem\u003ee.i after form validation.\u003c/em\u003e\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ccode\u003egetDatas\u003c/code\u003e\n                \u003cbr\u003eGet all the datas stored.\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e ( \u003cspan class=\"pl-en\"\u003esomethingHappens\u003c/span\u003e() ) {\n  \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edatas\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-smi\"\u003efs\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003egetDatas\u003c/span\u003e();\n  \u003cspan class=\"pl-en\"\u003econsole\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003elog\u003c/span\u003e( datas );\n  \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e return an object with stored values.\u003c/span\u003e\n\n  \u003cspan class=\"pl-en\"\u003econsole\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003elog\u003c/span\u003e( datas[\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003emy-form-name\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e] );\n  \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e return the value of `#name` field from `#my-form` form.\u003c/span\u003e\n}\u003c/pre\u003e\u003c/div\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-forms-good-practices\" class=\"anchor\" href=\"#forms-good-practices\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eForms Good Practices\u003c/h2\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-security-concern\" class=\"anchor\" href=\"#security-concern\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eSecurity concern\u003c/h3\u003e\n        \u003cp\u003eSome fields/datas should never be saved to avoid security issues. I have in mind:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eCredit Card information (save the big number, but not the security code)\u003c/li\u003e\n            \u003cli\u003ePassword field (in \"show my password\" mode)\u003c/li\u003e\n            \u003cli\u003eSensitive datas (security number, unique tokens, etc.)\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp\u003eTo prevent those fields from being automatically saved, you can use different tricks:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ccode\u003etype=\"password\"\u003c/code\u003e won't be saved,\u003c/li\u003e\n            \u003cli\u003efields with \u003ccode\u003edata-fs-save=\"false\"\u003c/code\u003e attribute won't be saved,\u003c/li\u003e\n            \u003cli\u003efields with those \u003ccode\u003eautocomplete\u003c/code\u003e attribute values won't be saved\n                \u003cul\u003e\n                    \u003cli\u003e\n                        \u003ca href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete-cc-csc\" rel=\"nofollow\"\u003e\u003ccode\u003ecc-csc\u003c/code\u003e\u003c/a\u003e: Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)\u003c/li\u003e\n                    \u003cli\u003e\n                        \u003ca href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete-current-password\" rel=\"nofollow\"\u003e\u003ccode\u003enew-password\u003c/code\u003e\u003c/a\u003e: a new password (e.g. when creating an account or changing a password)\u003c/li\u003e\n                    \u003cli\u003e\n                        \u003ca href=\"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete-new-password\" rel=\"nofollow\"\u003e\u003ccode\u003ecurrent-password\u003c/code\u003e\u003c/a\u003e: The current password for the account identified by the username field (e.g. when logging in)\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp\u003eIn case you have a doubt about the sensitivity of a data, just use \u003ccode\u003edata-fs-save=\"false\"\u003c/code\u003e on that \u003ccode\u003einput\u003c/code\u003e.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-form-nameid\" class=\"anchor\" href=\"#form-nameid\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eForm name/ID\u003c/h3\u003e\n        \u003cp\u003eA form should always be distinguishable thanks to a uniq identifier: \u003ccode\u003eid\u003c/code\u003e attribute or \u003ccode\u003ename\u003c/code\u003e attribute are the keys to make FS work. You need to fill one of them.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-keep-the-user-in-mind\" class=\"anchor\" href=\"#keep-the-user-in-mind\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eKeep the user in mind\u003c/h3\u003e\n        \u003cp\u003eFilling forms fields with user datas is kind of creepy when you think of that. Of course you can't access those datas, but the user is not supposed to know that. That's why FS propose by default a little message informing user when the page with the form is opening again with datas stored. The user have the possibility to use saved datas, or to use a new blank form.\u003c/p\u003e\n        \u003cp\u003eFrom the outside, as developer, you have access to methods to make the User Experience even better. For example, you could suggest to the users to choose if they want their datas being saved or not at the beginning. \u003ccode\u003estop\u003c/code\u003e, \u003ccode\u003epause\u003c/code\u003e and \u003ccode\u003edestroy\u003c/code\u003e method will help you.\u003c/p\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-specific-behaviours\" class=\"anchor\" href=\"#specific-behaviours\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eSpecific behaviours\u003c/h2\u003e\n        \u003cp\u003eThis script has some basic \"automatic\" behaviours you should know.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-name-and-id-attributes\" class=\"anchor\" href=\"#name-and-id-attributes\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003e\u003ccode\u003ename\u003c/code\u003e and \u003ccode\u003eid\u003c/code\u003e attributes\u003c/h3\u003e\n        \u003cp\u003eAs you should know, \u003ccode\u003ename\u003c/code\u003e and \u003ccode\u003eid\u003c/code\u003e attributes should always be provided for each input, select, textarea or whatever-form element you use.\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003eto compose the \u003cstrong\u003efield key\u003c/strong\u003e of the value saved, the script uses by default the \u003ccode\u003eid\u003c/code\u003e attribute in its methods for not grouped inputs, and \u003ccode\u003ename\u003c/code\u003e as fallback if \u003ccode\u003eid\u003c/code\u003e is not provided.\u003c/li\u003e\n            \u003cli\u003eto do the same with grouped inputs (checkboxes, radios), the script uses only the \u003ccode\u003ename\u003c/code\u003e attribute as \u003cstrong\u003efield key\u003c/strong\u003e.\u003c/li\u003e\n            \u003cli\u003ethe global key of an item (localStorage or sessionStorage item) is composed with the \u003cstrong\u003eform unique ID\u003c/strong\u003e and the \u003cstrong\u003efield key\u003c/strong\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp\u003eExample if you want to get the value of a field in that form (that would be already saved):\u003c/p\u003e\n        \u003cdiv class=\"highlight highlight-text-html-basic\"\u003e\u003cpre\u003e\u0026lt;\u003cspan class=\"pl-ent\"\u003eform\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eid\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003emy-form\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\n  \u0026lt;\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u0026gt;\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e \u003cspan class=\"pl-e\"\u003efor\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ename\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;Name\u0026lt;/\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e\u0026gt;\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003einput\u003c/span\u003e \u003cspan class=\"pl-e\"\u003etype\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003etext\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eid\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ename\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003ename\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ethe-name\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003evalue\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\n  \u0026lt;/\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u0026gt;\n  \u0026lt;\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u0026gt;\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eclass\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003elabel-like\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eid\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-label\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;Colors:\u0026lt;/\u003cspan class=\"pl-ent\"\u003espan\u003c/span\u003e\u0026gt;\n\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003einput\u003c/span\u003e \u003cspan class=\"pl-e\"\u003etype\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003echeckbox\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003evalue\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eRed\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003ename\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolors\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eid\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-red\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003earia-labelledby\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-label\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e \u003cspan class=\"pl-e\"\u003efor\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-red\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;Red\u0026lt;/\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e\u0026gt;\n\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003einput\u003c/span\u003e \u003cspan class=\"pl-e\"\u003etype\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003echeckbox\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003evalue\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eGreen\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003ename\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolors\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eid\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-green\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003earia-labelledby\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-label\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e \u003cspan class=\"pl-e\"\u003efor\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-green\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;Green\u0026lt;/\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e\u0026gt;\n\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003einput\u003c/span\u003e \u003cspan class=\"pl-e\"\u003etype\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003echeckbox\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003evalue\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003eBlue\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003ename\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolors\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003eid\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-blue\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"pl-e\"\u003earia-labelledby\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-label\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;\n    \u0026lt;\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e \u003cspan class=\"pl-e\"\u003efor\u003c/span\u003e=\u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003ecolor-blue\u003cspan class=\"pl-pds\"\u003e\"\u003c/span\u003e\u003c/span\u003e\u0026gt;Blue\u0026lt;/\u003cspan class=\"pl-ent\"\u003elabel\u003c/span\u003e\u0026gt;\n  \u0026lt;/\u003cspan class=\"pl-ent\"\u003ep\u003c/span\u003e\u0026gt;\n\u0026lt;/\u003cspan class=\"pl-ent\"\u003eform\u003c/span\u003e\u0026gt;\u003c/pre\u003e\u003c/div\u003e\n        \u003cp\u003eYou'll need to do that in JS for the name:\u003c/p\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003elet\u003c/span\u003e name_value \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ewindow\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003elocalStorage\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003egetItem\u003c/span\u003e( \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003emy-form-name\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e );\n\u003cspan class=\"pl-en\"\u003econsole\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003elog\u003c/span\u003e( name_value ); \u003cspan class=\"pl-c\"\u003e\u003cspan class=\"pl-c\"\u003e//\u003c/span\u003e (string) the value of the field.\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n        \u003cp\u003eFor the same input, if you don't provide \u003ccode\u003eid\u003c/code\u003e, just replace \u003ccode\u003ename\u003c/code\u003e by \u003ccode\u003ethe-name\u003c/code\u003e.\u003c/p\u003e\n        \u003cp\u003eTo get the checkboxes value(s), use:\u003c/p\u003e\n        \u003cdiv class=\"highlight highlight-source-js\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003elet\u003c/span\u003e checks \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ewindow\u003c/span\u003e.\u003cspan class=\"pl-smi\"\u003elocalStorage\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003egetItem\u003c/span\u003e( \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003emy-form-colors\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e );\n\u003cspan class=\"pl-en\"\u003econsole\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003elog\u003c/span\u003e( checks ); (array) the list \u003cspan class=\"pl-k\"\u003eof\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eid\u003c/span\u003e(s) \u003cspan class=\"pl-k\"\u003eof\u003c/span\u003e checked \u003cspan class=\"pl-en\"\u003echeckbox\u003c/span\u003e(es).\u003c/pre\u003e\u003c/div\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-limitations\" class=\"anchor\" href=\"#limitations\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eLimitations\u003c/h2\u003e\n        \u003cp\u003eDon't forget this script is an helper to save user time. If saving datas is a big challenge for you business, you should save them on your server and not locally on the user computer.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-ios\" class=\"anchor\" href=\"#ios\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eiOS\u003c/h3\u003e\n        \u003cp\u003eOn iOS since 5.1, Safari Mobile store localStorage datas in the cache directory which can be cleaned by the OS when memory space in full.\u003c/p\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-work-in-progress\" class=\"anchor\" href=\"#work-in-progress\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eWork In Progress\u003c/h2\u003e\n        \u003cp\u003eNext versions will be release with those future support.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-select-multiple\" class=\"anchor\" href=\"#select-multiple\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eSelect multiple\u003c/h3\u003e\n        \u003cp\u003eSelect with attribute \u003ccode\u003emultiple\u003c/code\u003e is not tested and a priori not supported yet.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-storageduration-parameter\" class=\"anchor\" href=\"#storageduration-parameter\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003e\u003ccode\u003estorageDuration\u003c/code\u003e parameter\u003c/h3\u003e\n        \u003cp\u003eIt's in the source code, but this parameter has no effect yet.\u003c/p\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-information-messages\" class=\"anchor\" href=\"#information-messages\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eInformation messages\u003c/h3\u003e\n        \u003cp\u003eA bunch of messages to:\u003c/p\u003e\n        \u003cul\u003e\n            \u003cli\u003ewarn users their browser just crashed\u003c/li\u003e\n            \u003cli\u003eactivate/deactivate save-mode directly by the user himself\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003ch3\u003e\n\u003ca id=\"user-content-offline-support\" class=\"anchor\" href=\"#offline-support\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eOffline support\u003c/h3\u003e\n        \u003cp\u003eDetect during the process if the user is still online or offline. If not add the possibility to display a warning message. If they try to submit the form, tell them their data is saved in their browser and the form will be send again when online. (don't close the tab!)\u003c/p\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-browser-support\" class=\"anchor\" href=\"#browser-support\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eBrowser Support\u003c/h2\u003e\n        \u003cp\u003eThis is an estimated table of browser support:\u003c/p\u003e\n        \u003ctable\u003e\n            \u003cthead\u003e\n                \u003ctr\u003e\n                    \u003cth\u003eChrome\u003c/th\u003e\n                    \u003cth\u003eFirefox\u003c/th\u003e\n                    \u003cth\u003eEdge\u003c/th\u003e\n                    \u003cth\u003eOpera\u003c/th\u003e\n                    \u003cth\u003eSafari\u003c/th\u003e\n                    \u003cth\u003eIE\u003c/th\u003e\n                \u003c/tr\u003e\n            \u003c/thead\u003e\n            \u003ctbody\u003e\n                \u003ctr\u003e\n                    \u003ctd\u003e41\u003c/td\u003e\n                    \u003ctd\u003e44\u003c/td\u003e\n                    \u003ctd\u003e12\u003c/td\u003e\n                    \u003ctd\u003e17\u003c/td\u003e\n                    \u003ctd\u003e10\u003c/td\u003e\n                    \u003ctd\u003e11\u003c/td\u003e\n                \u003c/tr\u003e\n            \u003c/tbody\u003e\n        \u003c/table\u003e\n        \u003cp\u003eMobile:\u003c/p\u003e\n        \u003ctable\u003e\n            \u003cthead\u003e\n                \u003ctr\u003e\n                    \u003cth\u003eAndroid Webview\u003c/th\u003e\n                    \u003cth\u003eChrome Android\u003c/th\u003e\n                    \u003cth\u003eEdge\u003c/th\u003e\n                    \u003cth\u003eFirefox Android\u003c/th\u003e\n                    \u003cth\u003eOpera Android\u003c/th\u003e\n                    \u003cth\u003eiOS Safari\u003c/th\u003e\n                \u003c/tr\u003e\n            \u003c/thead\u003e\n            \u003ctbody\u003e\n                \u003ctr\u003e\n                    \u003ctd\u003e41\u003c/td\u003e\n                    \u003ctd\u003e41\u003c/td\u003e\n                    \u003ctd\u003e12\u003c/td\u003e\n                    \u003ctd\u003e44\u003c/td\u003e\n                    \u003ctd\u003e17\u003c/td\u003e\n                    \u003ctd\u003e10\u003c/td\u003e\n                \u003c/tr\u003e\n            \u003c/tbody\u003e\n        \u003c/table\u003e\n        \u003ch2\u003e\n\u003ca id=\"user-content-humans-behind-the-code\" class=\"anchor\" href=\"#humans-behind-the-code\" aria-hidden=\"true\"\u003e\u003cspan aria-hidden=\"true\" class=\"octicon octicon-link\"\u003e\u003c/span\u003e\u003c/a\u003eHumans behind the code\u003c/h2\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003cstrong\u003eGeoffrey Crofte\u003c/strong\u003e\n                \u003cbr\u003eFirst idea and first release. Lead Dev.\u003c/li\u003e\n            \u003cli\u003e\n                \u003cstrong\u003eStéphanie Walter\u003c/strong\u003e\n                \u003cbr\u003eFirst beta tester. UX Ideas.\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/article\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeoffreycrofte%2Fform-saver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeoffreycrofte%2Fform-saver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeoffreycrofte%2Fform-saver/lists"}