使用HTML5实现本地数据存储（一）

最新推荐文章于 2024-01-15 09:06:41 发布

陈田田

最新推荐文章于 2024-01-15 09:06:41 发布

阅读量1.7k

点赞数

分类专栏： HTML 本地存储前端集结号文章标签： html5 本地化存储

本文链接：https://blog.csdn.net/candy_tity/article/details/53397047

版权

本文介绍了HTML5的本地数据存储特性，重点讲解了Web Storage，包括sessionStorage和localStorage。Web Storage提供了key-value存储方式，增强了客户端数据保存能力。它们具有length、Key、getItem、setItem、removeItem和clear等操作方法。文中还通过示例演示了如何使用localStorage统计页面访问次数。

摘要由CSDN通过智能技术生成

从大方向上来分，HTML5提供两种本地数据存储的功能：
①Web Storage：在客户端以key-value的形式保存数据；
②Web SQL Database：可以使用户在客户端使用关系数据库。

今天tity先带大家了解Web Storage。
Web Storage这种以key-value形式保存数据的功能，可以允许用户保存在应用程序上的各种设置。它类似于HTML4中的Cookie功能，但比Cookie拥有更好的安全性。

Web Storage按照保存数据的周期又可分为：
①sessionStorage：关闭窗口就会消失的存储方式；
②localStorage：关闭窗口后仍存在的存储方式，这种方式是按照具体主机URL（协议://主机:端口）为单位进行数据存储的。

以上两种实现数据存储的功能分别是由window.sessionStorage和window.localStorage对象提供的，它们拥有共同的方法和属性。

①length：返回保存数据的个数；
②Key(index)：指定索引序号index取得key；
③getItem(key)：通过key取得对应的value；
④setItem(key,value)：保存key-value，key和value都是字符串；
⑤removeItem(key)：删除key对应的value；
⑥clear()：删除所有的数据。

以localStorage为例，上面的getItem(key)等价于：
var v = localStorage.keyname;
setIt