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

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

2个回答

你要时时保存就用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>
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复lvvb: 我哪知道你用的什么编辑器,自己看下api
接近 4 年之前 回复
u012138357
lvvb 回复showbo: 编译器的内容如何存到localstorage中呢,没有在网上找到相关的内容,能稍微说一下嘛
接近 4 年之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复lvvb: 这个只是序列化表单内容,你的是html编辑器需要改进代码,单独存成编辑器内容,然后取值的时候调用api来给编辑器赋值才行
接近 4 年之前 回复
u012138357
lvvb 下面这段代码为何不行,无法保存到localstorage,请指教,多谢 <form id="savepaper" method="post"> <div class="edit_box"> <h3>正文</h3> <div class="edit_con" style="padding:0" id="myEditor"> {Common::get_editor("content",$info['content'],1200,380,'Front')} </div> </form>
接近 4 年之前 回复

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

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

})

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐