用jQuery和sessionStorage来实现表单的草稿保存功能

本文链接：https://blog.csdn.net/qq_32564967/article/details/89002319

在网站的日常使用中，草稿保存是一个比较常见的功能，当用户在编辑表单时，可能需要跳到其他页面填写其他信息，也有可能发生一些其他的意外情况导致页面的资料丢失，使用jQuery和sessionStorage就可以实现简单的草稿保存功能。

在如何添加表单草稿保存功能时，有两个关键问题需要考虑，一是使用什么技术来实现草稿保存，二是草稿保存与实际存入数据库的时间点的逻辑关系。

sessionStorage可以帮助我们做到草稿保存的功能，在jQuery中有这样一个事件：blur()，该事件为失去焦点，即当我们点击了其他的页面标签时，就会触发这个事件。所以原理就是使用jQuery捕获blur事件，然后存入sessionStorage，当跳转回当前页面时，再将sessionStorage中存储的内容放回到对应的输入框中。

基础代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<!-- 第一个form表单，这个form表单中的input会使用sessionStorage进行草稿保存 -->
<form action="server.php" method="post">
	<input type="text" id="input" name="msg" />
	<input type="submit" name="submit" id="submit">	
</form>

<!-- 第二个form表单，这个form表单中的input不会使用sessionStorage进行草稿保存 -->
<form method="post">
	<input type="text" id="input2" name="msg2" />
	<input type="submit" name="submit" id="submit2">	
</form>	

<a href="second.php">下一页</a>

<script>
	//通过blur事件触发sessionStorage
    $('#input').blur(function(){
        var val=$('#input').val();
        sessionStorage.setItem('msg',val);
    });

    //测试sessionStorage存储是否成功
    var test = sessionStorage.getItem('msg');
    console.log(test);

    //当点击提交按钮时，将sessionStorage中的信息移除
    $("#submit").click(function(){
    	sessionStorage.removeItem('msg');
    });

    //当网页加载时，将sessionStorage中的内容加载到对应的输入框中
    $(document).ready(function(){
        var val1=sessionStorage.getItem('msg');
        $("#input").val(val1);
    });

</script>

server.php是一个php文件，用来检测数据是否正常被提交。

second.php是一个php文件，用来跳转回当前页面。

页面初始效果是这样的：