Sisyphus.js的使用

一、引入js

創建html頁面test.html文件，而且引入jquery和sysyhpus以及html文件對應的test.js文件

<script type="text/javascript" src="jquery-3.1.1.js" ></script>
<script type="text/javascript" src="sisyphus.js" ></script>
<script type="text/javascript" src="test.js" ></script>

二、支持的控件以及寫法

文本框、複選框、單選框、textarea等均可以保持數據緩存。也能夠在js裏面控制哪些是不保持的。

<form id="aaa">
    aa:<input name="aa" id="aa" /><br>
    bb:<input type="password" name="password" id="bb" /><br>
    cc:<select id="cc">
        <option value="1" >hahaha111111</option>
        <option value="2">hahaha222222</option>
        <option value="3">hahaha333333</option>
        <option value="4">hahaha444444</option>
        <option value="5">hahaha555555</option>
    </select><br>
    dd:<input type="checkbox" name="dd" value="111" id="c1" >哈哈11
    <input type="checkbox" name="dd" value="222" id="c2">哈哈22
    <input type="checkbox" name="dd" value="333" id="c3" >哈哈33
    <input type="checkbox" name="dd" value="444" id="c4" >哈哈44
    <input type="checkbox" name="dd" value="555" id="c5" >哈哈55<br>
    ee:<input type="radio" name="ee" value="11">呵呵11
    <input type="radio" name="ee" value="22" >呵呵22
    <input type="radio" name="ee" value="33" >呵呵33
    <input type="radio" name="ee" value="44">呵呵44
    <input type="radio" name="ee" value="55">呵呵55<br>
    ff:<input type="file" name="ff" id="ff123" /><br>
    gg:<textarea rows="2" cols="20" name="gg" id="gg"></textarea>
    <button type="button" onclick="test()" >hehe</button>
</form>

例如：在sysyphus中，去掉password就能夠緩存密碼。

findFieldsToProtect: function( target ) {                     return target.find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" ).not( ":password" ).not( ":disabled" ).not( "[readonly]" );                 }

 

三、js加載

form表單的id直接加載。而且能夠設置多長時間自動保存，而且提示自動保存框

$(function(){     $( "#aaa" ).sisyphus({         locationBased: true,          excludeFields: $( "#c1" ), //排除         timeout: 10,         onBeforeSave: function() {             console.log("開始保存"+new Date());             }     }); });

四、效果展現

即便關掉頁面，再打開依然能夠保持數據的已有數據的狀態