formStorage는 jquery 기반 플러그인입니다(요소의 상태를 로컬에서 양식으로 저장)_jquery

원칙은 매우 간단합니다. 로컬 저장 메커니즘(userData 또는 localStorage)을 통해 양식에 있는 요소의 상태는 필요할 때 저장된 상태를 양식 요소에 복원할 수 있습니다.

json 데이터 형식도 사용했는데 플러그인에 필요한 기능을 처음부터 작성하고 싶었는데 너무 중복되고 불필요하다고 생각해서 그냥 다른 두 플러그인을 기반으로 작성했습니다.

은 jquery.json과 jStorage입니다. 이 두 플러그인은 그 자체로 실용적이고 컴팩트하며, 그 중에서도 jStorage가 매우 간단합니다. 기본 JSON을 지원하지 않는 이전 브라우저에서 널리 사용됨)에는 jquery.json 또는 json2가 필요합니다

formStorage는 3가지 메소드를 jQuery 객체로 확장하며 이는 비양식 태그에는 유효하지 않습니다.

저장 시 호출: $('#myform').formStore(/*excludes*/), 이 메소드는 양식 요소 ID가 포함된 배열을 전달하여 상태가 필요하지 않은 요소를 지정할 수 있습니다. 저장

복원 시 호출: $('#myform').formRestore()

저장소 호출 지우기: $('#myform').destroyStore(), 해당 로컬 저장소 데이터가 삭제되었기 때문에 이후 formRestore 호출은 작동하지 않습니다

참고: 복원 시 요소를 찾으려면 양식과 해당 양식 요소 모두 id, 저장할 때 양식의 ID를 키로 사용하고 모든 양식 요소의 상태를 값으로 json 문자열로 정리합니다.

입력 유형이 버튼, 파일, 제출, 재설정, 비밀번호, 이미지 중 하나인 경우 양식에 텍스트 영역이 있는 경우 라벨의 상태가 저장되지 않습니다. 그리고 텍스트 내용이 큽니다.

특히 IE6 및 7에서는 실제 사용에는 권장되지 않습니다.

다음은 브라우저별 로컬 저장 용량 참고표입니다(jStorage 홈페이지 참조).

그럼요, 사진 속 브라우저는 좀 오래된 것 같네요...

다음은 간단한 예입니다.

코드 복사 코드는 다음과 같습니다.

<이름 선택=" selectoptions" id=" select1">
option0
option1
< 옵션 값="옵션2">옵션2
<옵션 값="옵션3">옵션3

<br>
store >restore
destroy form>


예제에서 해당 js는 다음과 같습니다.

코드 복사

다음과 같습니다: $('#store, #restore, #destroy').on('click', function() { if(this.id == 'store')

$('#myform').formStore();

else if(this.id == 'restore')
$('#myform').formRestore()
else
$('#myform').destroyStore ();
});


마지막으로 관심이 있으시면 이 플러그인을 다운로드하실 수 있습니다(다운로드하려면 클릭하세요
formStorage
) 압축을 풀고 내부에서 직접 테스트를 실행해 보세요. html이면 충분합니다. 소스 코드는 압축되지 않았기 때문에 일부 불완전한 부분이 있을 수 있으니 토론을 위해 메시지를 남겨주세요.