使用js记住用户名 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        用户名：
    <input type="text" id="username" /><br />
    <input type="checkbox" id="remember"  />
        <label for="remember">记住用户名</label><br />
    <input type="button" onclick="sousuo()" id="button" value="登录"/>
     <label for="search" id="la"></label>
    </div>
    </form>
</body>
<script>
    function sousuo() {
        if (document.getElementById("remember").checked) {
            localStorage.setItem("username", document.getElementById("username").value)
            localStorage.setItem("tag", "true")
            console.log(localStorage.getItem("username"))
        }
        else {
            localStorage.setItem("username", "")
            localStorage.setItem("tag", "false")
        }
    }

</script>
    <script>
$(function(){
    var tag = localStorage.getItem("tag");
    if (tag == "true") {
        var username = localStorage.getItem("username");
        document.getElementById("username").value = username;
        document.getElementById("remember").checked=true;
    }
    else{
        var username = localStorage.getItem("username");
        document.getElementById("username").value = username;
        document.getElementById("remember").checked=false;
    }
})
</script> </html>

摘自school

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

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

 

storage 相关方法
1.storage.clear() 清空存储对象里所有键值

2.storage.getItem(keyName) 获取对应键名的键值

3.storage.setItem(keyName, keyValue) 设置对应键名的键值

4.storage.removeItem() 清空对应键名的键值

5.storage.key(n) 获取存储对象中第N个数据项键名

 

posted @ 2019-03-04 11:23  小zha  阅读(163)  评论(0)  编辑  收藏  举报