HTML5中网络存储如何实现 HTML5中网络存储实现代码示例

HTML5中网络存储如何实现？本篇文章小编给大家分享一下HTML5中网络存储实现代码示例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

1 前言

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，HTML5规范提出了网络存储的解决方案。

2 Web storage及其两种存储方式

2.1 Web Storage简介

2.1.1 特点

（1）设置数据和读取数据比较方便

（2）容量较大，sessionStorage约5M，localStorage约20M

（3）只能存储字符串，如果要存储JSON对象，可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。

2.1.2 优势

（1）减少网络流量:一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。

（2）快速显示数据:性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。加上网页本身也可以有缓存，整个页面和数据都在本地的话，可以立即显示。

（3）临时存储:很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

2.2 localStorage实现本地存储

localStorage作为HTML5 Web Storage的API之一，主要的作用是进行本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。localStorage的优势在于拓展了cookie的4KB限制，并且会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库。

2.2.1 localStorage中的方法属性

代码示例：

sessionStorage 主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。由于 sessionStroage 也是 Storage 的实例， sessionStroage 与 localStorage 中的方法基本一致，唯一区别就是存储数据的生命周期不同， locaStorage 是永久性存储，而 sessionStorage 的生命周期与会话保持一致，会话结束时数据消失。

2.3sessionStorage实现区域存储

从硬件方面理解， localStorage 的数据是存储子在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取，而 sessionStorage 的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除，需要注意的是， sessionStorage 中存储的数据只在当前浏览器窗口有效。

代码示例：

姓名：   年龄：