小谈H5 web本地数据存储

来源：互联网发布：找工作软件软件排行榜编辑：程序博客网时间：2024/05/22 16:39

前言：

说到本地数据存储，大家肯定都知道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.pagecount)//如果有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>

以上是完成保存浏览位置和恢复浏览位置的功能。

阅读全文

0 0

小谈H5 web本地数据存储

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

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