您的位置：首页 > Web前端 > HTML5

html5API之web存储

2017-10-10 09:41 288 查看
网络的迅猛发展，基于网页的应用越来越普遍越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发人员带来诸多不便，随着救世主html5的诞生为其提供了标准的解决方案。基于html5的Storage 存储即 window.sessionStorage   window.localStorageStorage特性：1、设置、读取方便2、容量较大，sessionStorage约5M、localStorage约20M3、只能存储字符串，可以将对象JSON.stringify() 编码后存储那么window.sessionStorage 和 window.localStorage的区别有哪些呢？window.sessionStorage：5M 存储在内存上1、生命周期=打开浏览器窗口到关闭浏览器窗口。2、在同一个窗口下数据可以共享。
window.localStorage：20M 永久生效 ，除非手动删除 否则一直留在硬盘上
1、永久生效，除非手动删除2、可以多窗口共享。它们的常用方法总结：setItem(key,value) 设置存储内容getItem(key) 读取存储内容removeItem(key) 删除键值为key的存储内容clear() 清空所有存储内容代码示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>记住用户名密码</title>
</head>
<body>
<label  for="">
用户名：<input  type="text"  class="username">
</label><br/><br/>
<label  for="">
密   码：<input  type="password"  class="pwd">
</label><br/><br/>
<label  for="">
记住密码：<input  type="checkbox"  class="ckb">
</label><br/><br/>
<button       class="btn">登录</button>
<script  type="text/javascript">
var username=document.querySelector(".username");
var pwd=document.querySelector(".pwd");
var ckb=document.querySelector(".ckb");
var btn=document.querySelector(".btn");

btn.onclick=function(){
if(ckb.checked){
// 如果选中记住密码则存储用户信息
window.localStorage.setItem("username",username.value);
window.localStorage.setItem("pwd",pwd.value);
}else{
//否则则移除用户信息
window.localStorage.removeItem("username");
window.localStorage.removeItem("pwd");
}
}
//当页面加载完毕后获取用户信息
window.onload=function(){
username.value= window.localStorage.getItem("username");
pwd.value=window.localStorage.getItem("pwd");
}
</script>
</body>
</html>
效果截图：下次加载页面时页面仍会记录用户信息这就是
window.localStorage的好处。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5API
                                                WEB存储
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航