JavaScript利用Cookie保存页面状态信息

JavaScript利用Cookie保存页面状态信息

概述

​ 在进行Java Web开发时，遇到了这么个问题，使用html标签进行表单提交后，诸如select、input之类的标签内的内容将恢复到原始状态，后来做的修改状态就此消失。对于之后操作相似或者仅改动一个标签内容信息的，又有可能要填写一大堆重复的信息，这样就显得不太友好了。对此，可以用Cookie来解决这个问题，Cookie在用户操作浏览器时，可以用于记录相关状态。Cookie在我们日常使用中也常常出现，如记录用户名密码以便下次登录时不需要手动填写等。

Cookie添加状态信息

​ 可以在jsp或者html页面中利用js操作Cookie，这里配合JQuery使用会更方便一点，具体代码如下：

<script type="text/javascript" >
    function add_user_into_cookie() {
        document.cookie = "user = " + $("#txt_user").val(); 
    } 
    function add_passwd_into_cookie() {
        document.cookie = "password = " + $("#txt_passwd").val(); 
    }
</script>

​ 通过上述代码，则可以向Cookie中添加状态信息，使用console.log()就可以清晰地看到Cookie存储的数据的结构，假设txt_user的内容是usr，txt_passwd的内容是1234，那Cookie的内容如下：

user=usr; password=1234;(之后可能有一些对于我们可能不需要的其他的信息)

提取Cookie中的状态信息

​ 了解了Cookie中存储的信息的结果，取出来就比较容易了，首先需要获取当前页面的Cookie，具体代码如下：

var tmp_cookie = document.cookie; 

​ 之后取相关状态信息则使用字符串处理的函数即可，如split等，可以很方便取出。