localStorage跟cookie的使用

最近做了記住密碼功能，用localStorage跟cookie都嘗試用了一下，感覺都挺好哈，很方便，特此記錄

html代碼：

<input type="text" id="userName" placeholder="賬號">
<input type="password" id="password" placeholder="密碼"/>
<input class="remember" type="checkbox" style="width: 0.3rem;margin-top: 0px;" id="" value=""/><label style="line-height: 32px;">記住密碼</label>
<button id="btn">登錄</button>

Js代碼：

<script type="text/javascript">
　//點擊記住密碼按鈕
 $(".remember").click(function(){ //如果有值，則將用戶名跟密碼存入localStorage或者cookie
　　if($(this).prop('checked') && $("#password").val()&& $("#userName").val()){
　　　　//localStorage.setItem("password",$("#password").val()); //存入localStorage寫法
　　　　//localStorage.setItem("userName",$("#userName").val());
　　　　$.cookie('password', $("#password").val(), { expires: 7 }); //存入cookie寫法（expires:7表示設置有效期為7天）
　　　　$.cookie('userName', $("#userName").val(), { expires: 7 });
　　}else{
　　　　//localStorage.setItem("password",'');
　　　　//localStorage.setItem("userName",'');
　　　　$.cookie("password",'',{ expires: -1 });
　　　　$.cookie("userName",'',{ expires: -1 });
　　}
            
}) 
$("#btn").click(function(){
　　if($(".remember").prop('checked') && $("#password").val()&& $("#userName").val()){
　　　　//localStorage.setItem("password",$("#password").val());
　　　　//localStorage.setItem("userName",$("#userName").val());
　　　　// 創建一個cookie並設置有效時間為7天: 
　　 　$.cookie('password', $("#password").val(), { expires: 7 });
　　　　$.cookie('userName', $("#userName").val(), { expires: 7 });
　　　　console.log($.cookie('password'));
　　}else{
　　　　$.cookie('password', '',{ expires: -1 }); //清空cookie里的password
　　　　$.cookie('userName', '',{ expires: -1 }); //清空cookie里的userName
　　　　//localStorage.setItem("password",''); //清空localStorage里的password
　　　　//localStorage.setItem("userName",''); //清空localStorage里的userName
　　}
　　　　var userName = $("#userName").val();
　　　　var password = $("#password").val();
　　　　if(!userName){
　　　　　　alertTip("請輸入賬號！");
　　　　}
　　　　if(!password){
    　alertTip("請輸入密碼！");
　　　　}
　　　　$.ajax({
　　　　　　url : basePath + '/login?loginName=' + userName + '&password=' + encodeURIComponent(password),
　　　　　　dataType : 'json',
　　　　　　type : "post",
    　success : function(data) {
    　　　if (!data.success) {
        alertTip(data.errmsg);
        return;
    　　　}
    　　　var userUid=data.user.userUid;
    　　　toApp(userUid)
　　　　　　　　window.location.href = 'index.html';
　　　　　　}, 
　　　　　　error : function() {
　　　　　　　　alertTip("未能連接到服務器!"); 
　　　　　　} 
　　　　}); 
}) 
　　function toApp(userUid){
　　　　if (isAndroid()) { //給androidapp傳參數
　　　　　　var jsonStr = JSON.stringify({"userUid": userUid});
　　　　　　AppHost.getUserUid(jsonStr);
　　　　} else { //給ios傳參數
　　　　　　window.webkit.messageHandlers.getUserUid.postMessage({"userUid": userUid});
　　　　} 
　　}
</script>

 

兩者區別：

1.cookie的存儲大小為4KB，而localStorage的存儲數據大小一般都是：5MB

2.cookie若不設置有效時間，則生命周期隨瀏覽器的關閉而結束，若設置了有效時間，則瀏覽器關閉，cookie數據也在，知道過了有效時間；而localStorage數據，除非你手動清楚，否則會一直存在