html5储存方式（demo：localStorage）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5储存方式（demo：localStorage）相关的知识，希望对你有一定的参考价值。
在html5前端的开发过程，如果想要储存用户信息，势必用到本地储存，小果今天就来说一说本地储存的这些事情。
存储方式
cookie:long long ago，作为浏览器端的“甜甜圈”,用来方便用户进行本地临时储存信息。你走过的路（浏览的网页），你留下的痕迹（密码、ID），我来帮你记下（设定存储路径，进行本地存储），方便你再次光临（二次登陆和访问）。只是，4kb大小，不够用啊~
localStorage:html5出现的新标签，5MB大小，够用了。
sessionStorage:页面关闭，我们之间也就没有关系了（具有时效性，关闭页面，存储的信息清除）。
（cookie需将内容发送到服务器，每次使用需要向服务器发送请求，消耗宽带流量；Web Storage数据存储在本地，不与服务器发生交互，操作比较方便）
小果就选择localStorage进行本地存储了。
html5本地存储
基本语句: window.localStorage;
获取: localStorage.getItem(key);
添加: localStorage.setItem(key,value);
修改: localStorage.key = "";
删除: localStorage.removeItem(key);
清除: localStorage.clear();
怎么用呢~
下面就做一个demo，展示一下：
（初始页面）
（输入信息）密码：明文/密文
（未选择“记住密码”，关闭页面，重新打开）
（输入新信息，选择“记住密码”） （关闭页面，重新打开）
body代码：
<body>
<form action="" method="">
<span>用户名：</span><input type="text" id="demoName"/>
<br />
<span>密码：</span><input type="password" id="demoPassword"/>
<br />
<span>显示密码</span><input type="checkbox" id="showPassword"/>
<span>记住密码</span><input type="checkbox" id="remPassword" />
<br />
<button>登录</button>
</form>
</body>
外部js引入：
<script src="js/jQuery-1.12.4.min.js"></script> <script src="js/localstorage.js"></script>
localstorage.js内容：
//页面所有元素加载完毕，执行
$(document).ready(function(){
//显示密码/隐藏密码
$("#showPassword").click(function(){
switch($("#demoPassword").attr("type")){
case "password":
$("#demoPassword").attr("type","text");
$("span:eq(2)").text("隐藏密码");
break;
case "text":
$("#demoPassword").attr("type","password");
$("span:eq(2)").text("显示密码");
break;
default:
break;
}
})
//读取本地localStorage储存的用户名、密码
var stor = window.localStorage;
$("#demoName").val(stor.getItem("name"));
$("#demoPassword").val(stor.getItem("password"));
//点击“记住密码”
$("#remPassword").click(function(){
stor.name = $("#demoName").val();
stor.password = $("#demoPassword").val();
});
})
OK，这个小demo就完成了。如果有更好的方法，欢迎和小果交流O(∩_∩)O哈哈~。学无止境，谢谢阅读。
以上是关于html5储存方式（demo：localStorage）的主要内容，如果未能解决你的问题，请参考以下文章