这篇文章将为大家详细讲解有关HTML5中如何实现网络存储,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强> 1前言
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足日益更新的需求,会经常性的在本地设备上存储数据,例如记录历史活动信息。传统方式使用文档。饼干来进行存储,但是由于其存储的空间只有4 kb左右,并且需要复杂的操作进行解析,给发开者带来很多不便,为此,HTML5规范提出了网络存储的解决方案。
<强> 2网络存储及其两种存储方式
<强> 2.1 Web存储简介
2.1.1特点
(1)设置数据和读取数据比较方便
(2)容量较大,sessionStorage约5米,localStorage约20米
(3)只能存储字符串,如果要存储JSON对象,可以使用window.JSON函数的把()方法和解析()方法进行序列化和反序列化。
2.1.2优势
(1)减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
(2)快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。加上网页本身也可以有缓存,整个页面和数据都在本地的话,可以立即显示。
(3)临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使sessionStorage用非常方便。
<强> 2.2 localStorage实现本地存储
localStorage作为HTML5 Web存储的API之一,主要的作用是进行本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中,直到用户或者脚本主动清除数据,否则该数据会一直存在。也就是说,使用了本地存储的数据将被持久化.localStorage的优势在于拓展了饼干的4 kb限制,并且会可以将第一次请求的数据直接存储到本地,这个相当于一个5米大小的针对于前端页面的数据库。
2.2.1 localStorage中的方法属性
方法属性
描述
setItem(键值)
该方法接收一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值
getItem(关键)
该方法接收一个键名作为参数,返回键名对应的值
romoveItem(关键)
该方法接收一个键名作为参数,并把该键名从存储中删除
长度类似数组的长度属性,用于访问存储对象中项的数量
键(n)
用于访问第n个关键的名称
明确()
清除当前域下的所有localSotrage内容
表格2.2.1
代码示例: