网页localstorage存储多个输入框的文本并在页面重新加载的时候将文本填入输入框中

问题描述：

页面有多个输入框，想用jQuery的blur函数在输入框失去焦点时保存数据到
localstorage中，用onload在页面重新加载的时候从localstorage中提取数
据写入输入框中
不知道这个想法是否可行
还有，我要如何写blur和onload的js函数呢，写了半天写不好，
输入框输入的数据是统一在点击保存按钮后通过ajax提交到服务器的，我是
应该在输入框还是保存操作的js中调用localstorage函数呢？在什么时候调用
请各位大神尽量讲详细一点，感激不尽

答

你要时时保存就用blur，统一保存可以注册onbeforeunload事件遍历所有控件进行保存（ajax提交成功后记得清空控件的值和storage中存储的值）
window.onload的时候从storage加载数据，有就初始化表单，推荐使用jstorage

示例，没有考虑控件重名，checkbox，radio之类的控件，你要兼容这些控件自己修改

 <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<form id="myform">
    text1:<input type="text" name="txt1" /><br />
    text2:<input type="text" name="txt2" /><br />
    text3:<input type="text" name="txt3" /><br />
</form>
<script>
    var formId = 'myform';
    window.onbeforeunload = function () {
        //用表单id做键名称
        $.jStorage.set(formId, $('#' + formId).serializeArray());
    }
    //提交成功后记得调用$.jStorage.deleteKey(formId)删除缓存数据
    window.onload = function () {
        var o = $.jStorage.get(formId);
        if (o) {//有缓存数据
            var elements = document.getElementById(formId).elements;
            for (var i = 0; i < o.length; i++) {
                elements[o[i].name].value = o[i].value;
            }
        }
    }
</script>

答

$(function(){
$('[name=elementName]').blur(function(){
window.localStorage.name=$(this).val();
});

    window.onload = function(){
        $('[name=elementName]').val(window.localStorage.name);
    }

})

测试通过可以的提交到服务器 js 中调用

网页localstorage存储多个输入框的文本并在页面重新加载的时候将文本填入输入框中

})

相关推荐