Html5之localStorage和sessionStorage缓存

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.1.4.2.min.js"></script>
    <script>
        function  MyClick1(){
            var userName=$("#txtUserName").val();
            var pwd=$("#txtPwd").val();
//            sessionStorage.setItem("k_username",userName);
//            sessionStorage.setItem("k_pwd",pwd);
            localStorage.setItem("k_username",userName);
            localStorage.setItem("k_pwd",pwd);
            alert("存储成功");
        }
        function MyClick2(){
            localStorage.removeItem("k_username");  //删除k_username的缓存
            localStorage.removeItem("k_pwd");  //删除k_pwd的缓存
            localStorage.clear();    //删除所有缓存
//            alert(localStorage.getItem("k_username"));
//            alert(localStorage.getItem("k_pwd"));
//            alert(sessionStorage.getItem("k_username"));
//            alert(sessionStorage.getItem("k_pwd"));
        }
    </script>
</head>
<body>
 <input type="text" id="txtUserName">
 <input type="text" id="txtPwd">
<input type="button" value="按钮1" onclick="MyClick1()">
<input type="button" value="按钮2" onclick="MyClick2()">
</body>
</html>

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用。
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。

留言板案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            if(localStorage.getItem("k_con")!==null){
                "k_con",$("#DCon").html(localStorage.getItem("k_con"));
            }
        });
        function PostCon(){
            var sCon=$("#trCon").val();
            $("#DCon").append("<div>" +sCon + "</div>" );
            localStorage.setItem("k_con",$("#DCon").html());
        }

        //清除
        function Clear(){
            $("#DCon").html("");
            $("#trCon").val("");
            localStorage.clear();
        }
    </script>
</head>
<body>
    <div><textarea id="trCon" cols="30" rows="8"></textarea></div>
    <div><input type="button" value="发表" onclick="PostCon()"><input type="button" value="清除" onclick="Clear()"></div>
   <div id="DCon"></div>

</body>
</html>

秒客网

Html5之localStorage和sessionStorage缓存

相关文章