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

HTML5 web存储

2017-03-12 17:42 399 查看

　　之前，我们在客户端存储数据都是使用cookie的方式，但是，cookie不适合大量数据的传递，cookie的速率和效率都很低，于是html5引入了在客户端存储数据的新方式：

localStorage

sessionStorage

第一部分： localStorage

　　localStorage存储数据是没有时间限制的，即使过了一年，数据依然可用。

　　创建localStorage可以使用localStorage.setItem()方法，该方法接收两个参数，第一个是键名，第二个是键值。

　　读取localStorage可以使用localStorage.getItem()方法，该方法接收一个参数，即键名。

　　举例如下：

<script>
localStorage.setItem("name", "朱振伟");
localStorage.setItem("sex", "男");
localStorage.setItem("age", 21);
document.write(localStorage.getItem("name")+"<br/>");
document.write(localStorage.getItem("sex")+"<br/>");
document.write(localStorage.getItem("age")+"<br/>");
</script>

　　最终的效果如下所示：

　　创建数据的方式还有一种，就是直接添加给localStorage，如下所示：

localStorage.test = "good";
document.write(localStorage.test+"<br/>");
document.write(localStorage.getItem("test"));

　　最终的效果如下：

　　

　　除此之外，我们还可以使用它来对用户访问页面的次数进行计数。

　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage实现页面计数</title>
<style>
div.wrap {
font-size: 20px;
}
div.wrap span {
font-size: 30px;
font-style: italic;
text-shadow: 0 0 5px blue;
letter-spacing: 10px;
}
</style>
</head>
<body>
<div class="wrap">您第<span class="time"></span>次来到这里了</div>
<script>
if (localStorage.pagecount === undefined) {
localStorage.setItem("pagecount", 0);
} else {
localStorage.pagecount = Number(localStorage.pagecount) + 1;
}
document.querySelector(".time").innerHTML = localStorage.pagecount;
</script>
</body>
</html>

　　我们可以发现，只要我们刷新一次页面，计数就会增加1，即使我们关掉了浏览器，然后再次打开这个页面，也可以发现计数是

　　没有中断的。这就是localStorage的local之意了。

　　说明：一般而言， localStorage存储的数据都在下面的路径中：

C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage

　　我们也可以打开chrome控制台，然后进入application就可以发现 localStorage 的选项了。

进来之后，我们还可以编辑存储的数据，或者删除存储的数据。

注意：当我们在编辑器中创建localStorage之后，刷新页面，就可以看到保存的localStorage了。

　　

第二部分：sessionStorage

　　　sessionStorage和localStorage十分相似，唯一的区别在于 -- sessionStorage 方法针对一个session进行数据存储，当用户关闭浏览器之后，数据就会被删除，而localStorage存储的数据即使在浏览器关闭之后也不会被删除。

　　在创建和获取sessionStorage时，方法与前者一致，如下：

sessionStorage.test = "hahah";
sessionStorage.setItem("name", "zzw");
sessionStorage.setItem("age", 21);
document.write(sessionStorage.test + "<br/>");
document.write(sessionStorage.getItem("name") + "<br/>");
document.write(sessionStorage.getItem("age") + "<br/>");

　　效果如下：

　　这时，我们查看sessionStorage, 如下：

　　

　　然后，我把此页面关掉，然后再把html中的相关代码注释，可以发现已经没有sessionStorage。

　　而如果采用同样的做法， localStorage存储的数据依旧会在。

　　举一个例子：

<!DOCTYPE html>
<html>
<head>
<script>

function clickCounter() {
sessionStorage.setItem("clickcount", 1);

// 虽然在这里我设置的是数字1， 但是输出之后就成了字符串,  即sessionStorage只能存储字符串
console.log("第一次", typeof sessionStorage.clickcount); // 第一次 string
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 1 次。";

// 注意：这里我使用了自定义函数的模式
clickCounter = function () {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
</body>
</html>

　　注意：在上面的这个例子中，我使用了自定义函数的模式，因为我们对于其中的某些语句只需要使用一次，所以可以使用这种模式，更多可以看我的文章《JavaScript模式》。

　　

　　

　　另外，我们也可以使用sessionStorage来实现统计访问次数，但是每次在关闭浏览器之后就会停止计数了。

　　点击这里看例子

　　上面只是介绍了localStorage和sessionStorage的主要的方法，下面的例子中有更多的方法实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webstorage</title>
</head>
<body>
<script>
localStorage.setItem("zzw", "shuaiq");
localStorage.removeItem("zzw");
console.log(localStorage.getItem("zzw")); // null 因为在上一行被我删去了
console.log(localStorage.length); // 8  获得本地存储的条数
localStorage.setItem("ht", "beau");
console.log(localStorage.ht); // beau  这里我们可以直接使用key，即键名来获取键值。
localStorage.clear();
console.log(localStorage.length); // 0 即通过clear命令可以删除所有的本地存储
</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航