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

小谈H5 web本地数据存储

2017-10-29 23:25 405 查看
前言：

说到本地数据存储，大家肯定都知道cookie，但是有个问题，cookie的问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。并且cookie每次都随请求数据发送到服务器端，这使得
cookie 速度很慢而且效率也不高。
但是走到了HTML5，便有了一个比cookie更好的本地存储方式：localStorage 和 sessionStorage

简介：

localStorage - 没有时间限制的数据存储。

sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）

他们和cookie有什么相同之处又有什么不同之处呢？

相同之处：

1.他们都是用于存储用户数据。

2.他们都是以字符串形式存储数据。

3.他们存储的数据都有大小限制，cookie大致4KB，而大部分现在的Storage都能达到5MB。

不同之处：

1.它们的生命周期不同。sessionStorage 的生命周期是一个会话，localStorage的生命周期是永久，cookie 的生命周期可以自定义，cookie 可以设置过期时间，数据在过期时间之前可以访问。

2.支持情况不同，基本所有的浏览器都支持cookie，但是只有高版本浏览器支持Storage。如下图



测试方法很简单，如下代码：

if(window.localStorage){

 alert('支持 localStorage');

}else{

 alert('不支持 localStorage');

}

深入了解：

这里用sessionStorage进行示例。localStorage和其相同。

window.sessionStorage.name = "li";
sessionStorage["sex"] = "man";
sessionStorage.setItem("age","18");
console.log(sessionStorage);
var a =sessionStorage.getItem("age");//获取age的值
console.log(a);


结果：
                                                             


以上是为其添加属性的三个不同的方法，相信你也发现，前两个方法和对象的属性赋值非常非常像，如果你发现了，说明你基础掌握不错。当然，取其属性的值也除了有getItem方法外也与取对象的属性的值也完全相同，我便不在赘述。

若用localStorage进行存储便需要用removeItem();方法删除，如果希望一次性清除所有的键值对，可以使用clear()。

localStorage.removeItem("c");//清除c的值

同时在HTML5中还提供了一个key();方法，可以在不知道哪些键值的情况的时候使用。

利用他们我们能做完成什么样的功能？

用sessionStorage我们可以写一个简单的页面刷新次数计数器；

if(sessionStorage.p
4000
agecount)//如果有pagecount这个键值{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;//千万千万记住要改变数据类型
}
else{
sessionStorage.pagecount=1;//没有就设置为1
}
document.write("刷新次数为"+sessionStorage.pagecount+"次");


如果改用localStorage我们就可以完成一个访问次数计数器。

程序1：如下是一个可以自动填写密码的小程序（因为只想完成功能，所以还是有些漏洞，比如可以在填写完用户名的时候进行有无缓存的判断，在提交时提示是否保存账号密码等等）
<body>
<form action="li.php">
<input type="text"id="userId">
<input type="text"id="password">
<!--用text更加明显-->
</form>
</body>
<script>
var local =window.localStorage;
var sec =document.getElementById("password");
function auto() {
var id =document.getElementById("userId").value;
var num =document.getElementById("password").value;
if(local.getItem(id))
{
console.log(local.getItem(id));
document.getElementById("password").value=local.getItem(id);
//注意不能用num
}
else
{
console.log("new");
local.setItem(id,num);
}
}

sec.onblur=auto;
</script>

程序2，程序3：用sessionStorage和localStorage分别完成对滚动条的控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 4000px;
}
</style>
</head>
<body>
<div></div>
</body>
<script src="../jQuery/jquery-3.1.1.js"></script>
<script>
sessionStorage.setItem("key", "value");
$(window).scroll(function(){
if($(document).scrollTop()!=0{
sessionStorage.setItem("offsetTop",$(window).scrollTop());//保存滚动位置
}
});
window.onload = function(){
var offset = sessionStorage.getItem("offsetTop");//读取位置信息
$(document).scrollTop(offsetTop);//设置位置
};
</script>
</html>

以上是完成刷新页面进行刷新不换行的功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 4000px;
}
#b1{
position: fixed;
left: 20px;
bottom: 50px;
}
#b2{
position: fixed;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div></div>
<button id="b1">保存阅读位置</button>
<button id="b2">回到上次阅读位置</button>
</body>
<script src="../jQuery/jquery-3.1.1.js"></script>
<script>
$("#b1").click(function () {
localStorage.setItem("site","in");
if ($(document).scrollTop()!=0){
localStorage.setItem("site",$(window).scrollTop());
}
console.log(localStorage);
});
$("#b2").click(function () {
console.log(localStorage);
var offset = localStorage.getItem("site");
$(document).scrollTop(offset);
});
console.log(sessionStorage);
</script>
</html>

以上是完成保存浏览位置和恢复浏览位置的功能。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航