HTML5中如何实现网络存储
这篇文章将为大家详细讲解有关HTML5中如何实现网络存储，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
1 前言
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，HTML5规范提出了网络存储的解决方案。
2 Web storage及其两种存储方式
2.1 Web Storage简介
1.1 特点
（1）设置数据和读取数据比较方便
（2）容量较大，sessionStorage约5M，localStorage约20M
（3）只能存储字符串，如果要存储JSON对象，可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。
1.2 优势
（1）减少网络流量:一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
（2）快速显示数据:性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。加上网页本身也可以有缓存，整个页面和数据都在本地的话，可以立即显示。
（3）临时存储:很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
2.2 localStorage实现本地存储
localStorage作为HTML5 Web Storage的API之一，主要的作用是进行本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。localStorage的优势在于拓展了cookie的4KB限制，并且会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库。
2.1 localStorage中的方法属性
方法属性 | 描述 |
setItem(key，value) | 该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 |
getItem(key) | 该方法接收一个键名作为参数，返回键名对应的值 |
romoveItem(key） | 该方法接收一个键名作为参数，并把该键名从存储中删除 |
length | 类似数组的length属性，用于访问Storage对象中item的数量 |
key(n) | 用于访问第n个key的名称 |
clear() | 清除当前域下的所有localSotrage内容 |
表格 2.2.1
代码示例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>localStorage</title></head><body><input type="text" id="username" ><input type="button" value="localStorage 设置数据 " id="localStorageId"><input type="button" value="localStorage 获取数据 " id="getlocalStorageId"><input type="button" value="localStorage 删除数据 " id="removesessionStorageId"><script>document.getElementById("localStorageId").onclick=function(){// 把用户在 input 里面数据的数据保存到 localStoragevar username=document.getElementById("username").value;window.localStorage.setItem("username",username);};document.getElementById("getlocalStorageId").onclick=function(){// 获取数据，从 localStoragevar username=window.localStorage.getItem("username");alert(username);};document.getElementById("removesessionStorageId").onclick=function(){// 删除 localStorage 中的数据var username=document.getElementById("username").value;window.localStorage.removeItem("username");};</script></body></html>sessionStorage 主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。由于 sessionStroage 也是 Storage 的实例， sessionStroage 与 localStorage 中的方法基本一致，唯一区别就是存储数据的生命周期不同， locaStorage 是永久性存储，而 sessionStorage 的生命周期与会话保持一致，会话结束时数据消失。
2.3sessionStorage实现区域存储
从硬件方面理解， localStorage 的数据是存储子在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取，而 sessionStorage 的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除，需要注意的是， sessionStorage 中存储的数据只在当前浏览器窗口有效。
代码示例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>sessionStorage</title></head><body>姓名： <input type="text" id="username"> 年龄： <input type="text" id="age"><input type="button" value="sessionStorage 设置数据 " 11 id="sessionStorageId"><input type="button" value="sessionStorage 获取数据 " id="getsessionStorageId"><input type="button" value="sessionStorage 清除所有数据 " id="clearsessionStorageId"><script>// 增加数据document.getElementById("sessionStorageId").onclick = function() {// 获取姓名和年龄输入框的值var username = document.getElementById("username").value;var age = document.getElementById("age").value;// 定义一个 user 对象用来保存获取的信息var user = {username: username,age: age}// 使用 stringify() 将 JSON 对象序列号并存入到 sessionStoragewindow.sessionStorage.setItem("user",JSON.stringify(user));};//sessionStorage 里面存储数据，如果关闭了浏览器，数据就会消失 ..// 单个浏览器窗口页面有效document.getElementById("getsessionStorageId").onclick = function() {var valu = window.sessionStorage.getItem("user");alert(valu);};// 清除所有的数据document.getElementById("clearsessionStorageId").onclick = function() {window.sessionStorage.clear();};</script></body></html>关于“HTML5中如何实现网络存储”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
