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

HTML 5 本地存储----LocalStorage 小DEMO

2017-07-31 21:15 447 查看

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

下面写一个本地存储数据的小DEMO

<!DOCTYPE html>
<html>
<head>
<title>浏览器本地存储</title>
<meta charset="utf-8"/>
</head>
<body>
<p>你浏览这一页<span id="count">0</span> 次</p>
<p><input type="button" name="changeStorage" value="changeStorage" onClick="changeS()"></p>
<script type="text/javascript">
var storage = window.localStorage;
if(!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount", 0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;     //必须进行格式转换
document.getElementById("count").innerHTML = storage.pageLoadCount;
showStorage();
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){
e=window.event;
}
showObject(e);
}
function showObject(obj){
//递归显示object
if(!obj){
return ;
}
for (var i in obj) {
if (typeof(obj[i])!="object" || obj[i] == null) {
document.write(i + ":" + obj[i] + "<br/>");
}
else{
document.write(i + ":object" + "<br/>");
}
}
}

storage.setItem("a",5);
function changeS() {
//修改一个键值，测试storage事件
if(!storage.getItem("b")){
storage.setItem("b",0);
}
storage.setItem('b',parseInt(storage.getItem('b'))+1);
}

function showStorage() {
//循环显示localStorage里的键值对
for(var i=0; i<storage.length; i++){
//key(i)获得相应的键，再用getItem()方法获得相应的值
document.write(storage.key(i) + ":" + storage.getItem(storage.key(i)) + "<br>");
}
}
</script>
</body>
</html>

截图：

总结：将部分数据读写在本地LocalStorage下，大大降低的数据库的查询访问压力，以提高系统的性能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航