html5 本地存储

最新推荐文章于 2024-05-11 15:24:58 发布

转载最新推荐文章于 2024-05-11 15:24:58 发布 · 252 阅读

本文介绍了HTML5中localStorage和sessionStorage两种本地存储方法的特点及使用方式，并对比了它们与传统cookie的区别，最后通过实例展示了如何利用localStorage记录页面加载次数。

最近一直在学习 html5，为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要介绍下 html5 的本地存储。

在客户端存储数据

html5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对 session 的数据存储，一旦窗口关闭就没有了

两个方法用法完全一样，下面就以 localStorage 为例。

为什么要用本地存储

早期我们都是使用 cookie 来完成的，但是 cookie 不适合大量的数据存储，也就是说它太小，只有 4k 的样子，而且速度慢效率低。

localStorage 方法

那么我们该如何添加数据呢？很简单，就像给对象添加属性一样：

localStorage.pageLoadCount = 1;

可以通过浏览器的控制台来查看是否有存储数据：

同样读取和修改数据也很方便：

console.log(localStorage.pageLoadCount);    //读取
localStorage.pageLoadCount = 10;            //修改
console.log(localStorage.pageLoadCount);    //读取

以下是结果：

当然 localStorage 本身自带一些方法及属性，具体如下：

localStorage.clear();                       //清除所有的存储数据
localStorage.getItem('pageLoadCount');      //读取存储数据，返回值 "10"，等同于 localStorage.pageLoadCount
localStorage.key(0);                        //获取存储数据的 key，返回值 "pageLoadCount"
localStorage.length;                        //获取存储数据的长度
localStorage.removeItem('pageLoadCount');   //删除特定的存储数据
localStorage.setItem('name','Jack');        //新增加一个存储数据，等同于 localStorage.name = 'Jack';

需要注意的是：读取存储数据的时候，返回的是字符串，无论之前存的是什么，最后读取的都是字符串，所以读取的时候需要进行类型转换。

最后附上 localStorage 应用的 demo：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>localStorage</title>
</head>
<body>
    <p id="p"></p>
</body>
</html>
<script>
window.onload = function(){
    if(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0;
    localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
    document.getElementById('p').innerHTML = '浏览次数：' + localStorage.pageLoadCount + ' 次。';
}
</script>




localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象
备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。