HTML5-localStorage
2017-09-08 本文已影响0人
浅唱_3eef
一、什么是localStorage
localStorage的出现时为了在客户端存储本地数据，在此出现之前一直是使用cooike来存储数据，但是cookie的存储空间较小。
特点：
①本地存储数据库会自动的为每一个网站（IP地址）建立一个独立的表格。在同一个网站数据是共享的，但是不能跨域。
②localStorage存储的信息是永久不会丢失的，除非用户清除缓存信息。
③localStorage是一个简单的数据库，没有查询功能，不能SQL操作，只能简单的读取。
④localStorage的值类型为“string”
二、localStorage使用
这里只介绍常用存储和获取信息的方法：
①setItem("key","value") 存储信息
②getItem("key") 获取信息
eg：
localStorage.setItem("我是key","我是value");
localStorage.getItem("我是key");
三、小案例（表单显示）
效果如图，不管浏览器刷新还是关闭，信息一直不变
image.png
<body>
<form >
<p>姓名：<input type="text" name="name"></p>
<p>年龄：<input type="number" name="age"></p>
<p>性别：
<label><input type="radio" name="sex" value="man">男</label>
<label><input type="radio" name="sex" value="woman">女</label>
</p>
<p>爱好：
<label><input type="checkbox" name="hobby" value="read">读书</label>
<label><input type="checkbox" name="hobby" value="travel">旅游</label>
<label><input type="checkbox" name="hobby" value="swim">游泳</label>
</p>
<p>籍贯：
<select name="address" id="">
<option value="BJ">北京</option>
<option value="HB">河北</option>
<option value="LN">辽宁</option>
</select>
</p>
</form>
<script>
//绑定监听
$("input,select").bind("input change",function(){
//表单序列化
var str = $("form").serialize();
localStorage.setItem("info",str);
});
//回显数据
var s = localStorage.getItem("info");
//先转数组
var arr = s.split("&");
for (var i = 0; i < arr.length; i++) {
var kvarr = arr[i].split("=");
var k = kvarr[0];
var v = kvarr[1];
switch($("[name='"+k+"']")[0].type){
case "text":
case "number":
$("input[name='"+k+"']").val(decodeURIComponent(v));
break;
case "radio":
case "checkbox":
$("input[name='"+k+"']").each(function(){
if($(this).attr("value") === decodeURIComponent(v))
$(this).attr("checked",true);
});
break;
case "select-one":
$("[name='"+k+"'] option").each(function(){
if($(this).attr("value") === decodeURIComponent(v))
$(this).attr("selected",true);
});
break;
};
};
</script>
</body>
