html5数据存储,html5提供的客户端存储数据的方法
1 前言
随着互联网的快速发展，基于web的应用越来越普遍，同时也越来越复杂。为了满足日益更新的需求，数据会频繁地存储在本地设备中，比如记录历史活动信息。传统上使用document.cookie进行存储，但由于其存储空间只有4KB左右，且需要复杂的操作进行解析，给发送方带来了诸多不便。因此，HTML5规范提出了网络存储的解决方案。
2 Web storage及其两种存储方式
2.1 Web Storage简介
特征
(1)设置数据和读取数据方便。
(2)大容量，会话存储约5M，本地存储约20M。
(3)只能存储字符串。如果要存储JSON对象，可以使用window的stringify()方法和parse()方法。JSON来序列化和反序列化它们。
2.1.2优势
(1)减少网络流量：数据一旦存储在本地，就可以避免向服务器请求数据，因此减少了不必要的数据请求，减少了浏览器和服务器之间不必要的数据传输。
(2)数据显示速度快：性能好。从本地读取数据比通过网络从服务器获取数据要快得多。可以即时获得本地数据。此外，网页本身也可以有缓存，如果整个页面和数据都在本地，可以立即显示。
(3)临时存储：很多情况下，只需要在用户浏览一组页面的过程中使用数据，关闭窗口后可以丢弃数据。在这种情况下，使用sessionStorage非常方便。
2.2 localStorage实现本地存储
localStorage作为HTML5 Web Storage的API之一，主要用于本地存储。本地存储是指数据以键值对的形式存储在客户端计算机中，直到用户或脚本主动清除数据，否则数据将一直存在。也就是说，本地存储的数据将被持久化。localStorage的优势在于扩展了cookie的4KB限制，可以直接在本地存储第一次请求的数据，相当于一个5M大小的数据库做前端页面。
2.2.1本地存储中的方法属性
方法属性
形容
setItem(键，值)
该方法接收一个键名和值作为参数，并将键值对添加到存储中。如果键名存在，它将更新其相应的值。
getItem(键)
此方法接收一个键名作为参数，并返回对应于该键名的值。
romoveItem(键)
方法接收密钥名作为参数，并从存储中删除密钥名。
长度
数组的长度属性用于访问存储对象中的项数。
钥匙(n)
用于访问第n个密钥的名称。
清除()
清除当前域下的所有localSotrage内容。
表2.2.1
代码示例：
！DOCTYPE htmlhtmlheadmeta charset= UTF-8 title本地存储/title/head body输入类型= text id= username 输入类型= button 值=本地存储设置数据id=localStorageId 输入类型=按钮值=本地存储获取数据id=getlocalStorageId 输入类型=按钮值=本地存储删除数据id= removesessionStorageId 脚本文档。getelementbyid(“本地存储id”).onclick=function(){//把用户在投入里面数据的数据保存到localStoragevar用户名=文档。getelementbyid(“用户名”).价值；window.localStorage.setItem(用户名，用户名);};文档。getelementbyid( getlocalStorageId ).onclick=function(){//获取数据，从localStoragevar用户名=窗口。本地存储。getitem(“用户名”)；警报(用户名);};文档。getelementbyid( removesessionStorageId ).onclick=function(){//删除本地存储中的数据var用户名=文档。getelementbyid(用户名)。价值；window.localStorage.removeItem(用户名);};/script/body/html会话存储主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。由于会话存储也是仓库的实例，会话存储与本地存储中的方法基本一致，唯一区别就是存储数据的生命周期不同，位置存储是永久性存储，而本地存储的生命周期与会话保持一致，会话结束时数据消失。
2.3sessionStorage实现区域存储
从硬件方面理解，本地存储的数据是存储子在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取，而本地存储的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除，需要注意的是，会话存储中存储的数据只在当前浏览器窗口有效。
代码示例：
！DOCTYPE html htmlheadmeta charset= UTF-8 titlesessionStorage/title/head body姓名：输入类型=text id=用户名年龄：输入类型=text id=age 输入类型=按钮值=sessionStorage设置数据11 id=sessionStorageId 输入类型=按钮值=sessionStorage获取数据id=getsessionStorageId 输入类型=按钮值=sessionStorage清除所有数据id= clearsessionStorageId script//增加数据文档。getelementbyid(“会话存储id”).onclick=function() {//获取姓名和年龄输入框的值var用户名=文档。getelementbyid(用户名)。价值；var age=文档。getelementbyid(“年龄”).价值；//定义一个用户对象用来保存获取的信息var用户={用户名：用户名，年龄：年龄}//使用stringify()将数据对象序列号并存入到会话存储窗口。会话存储。setitem( user ，JSON。string ify(用户))；};//会话存储里面存储数据，如果关闭了浏览器，数据就会消失.//单个浏览器窗口页面有效文档。getelementbyid( getsessionStorageId ).onclick=function(){ var valu=window。会话存储。getitem( user )；alert(valu)；};//清除所有的数据文档。getelementbyid( clearsessionStorageId ).onclick=function(){ windows。会话存储。clear()；};/脚本/正文/html3 总结
HTML5中的两种存储方式都比较实用，我们在设计前端页面时，可以根据相应的用户访问情况预测来增添相应的js，既增加了用户浏览的体验，又能实现存储管理的高效性，合理的利用存储空间。
到此这篇关于HTML5中的网络存储的文章就介绍到这了，更多相关html5网络存储内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。