1 前言
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4kb左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，html5规范提出了网络存储的解决方案。
2 web storage及其两种存储方式
2.1 web storage简介
2.1.1 特点
（1）设置数据和读取数据比较方便
（2）容量较大，ssionstorage约5m，localstorage约20m
（3）只能存储字符串，如果要存储json对象，可以使用window.json的stringify()方法和par()方法进行序列化和反序列化。
2.1.2 优势
（1）减少网络流量:一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
（2）快速显示数据:性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。加上网页本身也可以有缓存，整个页面和数据都在本地的话，可以立即显示。
（3）临时存储:很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用ssionstorage非常方便。
2.2 localstorage实现本地存储
localstorage作为html5 web storage的api之一，主要的作用是进行本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。localstorage的优势在于拓展了cookie的4kb限制，并且会可以将第一次请求的数据直接存储到本地，这个相当于一个5m大小的针对于前端页面的数据库。
2.2.1 localstorage中的方法属性
方法属性
描述
titem(key，value)
该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值
getitem(key)
该方法接收一个键名作为参数，返回键名对应的值
romoveitem(key）
该方法接收一个键名作为参数，并把该键名从存储中删除
length
类似数组的length属性，用于访问storage对象中item的数量
key(n)
用于访问第n个key的名称
clear()
清除当前域下的所有localsotrage内容
表格 2.2.1
代码示例：
<!doctype htm情感隐私l><html><head><meta chart="utf-8"><title>localstorage</title></head><body><input type="text" id="urname" ><input type="button" value="localstorage 设置数据 " id="localstorageid"><input type="button" value="localstorage 获取数据 " id="getlocalstorageid"><input type="button" value="localstorage 删除数据 " id="removessionstorageid"><script>document.getelementbyid("localstorageid").onclick=function(){// 把用户在 inshowsput 里面数据的数据保存到 localstoragevar urname=document.getelementbyid("urname").value;window.loca普通的个人简历怎么写lstorage.titem("urname",urname);};document.getelementbyid("getlocalstorageid").onclick=function(){// 获取数据，从 localstoragevar urname=window.localstorage.getitem("urname");alert(urname);};document.g张文喜etelementbyid("removessionstorageid").onclick=function(){// 删除 localstorage 中的数据var urname=document.getelementbyid("urname").value;window.localstorage.removeitem("urname");};</script></body></html>ssionstorage 主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。由于 ssionstroage 也是 storage 的实例， ssionstroage 与 localstorage 中的方法基本一致，唯一区别就是存储数据的生命周期不同， locastorage 是永久性存储，而 ssionstorage 的生命周期与会话保持一致，会话结束时数据消失。
2.3ssionstorage实现区域存储
从硬件方面理解， localstorage 的数据是存储子在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取，而 ssionstorage 的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除，需要注意的是， ssionstorage 中存储的数据只在当前浏览器窗口有效。
代码示例：
<!doctype html><html><head><meta chart="utf-8"><title>ssionstorage</title></head><body>姓名： <input type="text" id="urname"> 年龄： <input type="text" id="age"><input type="button" value="ssionstorage 设置数据 " 11 id="ssionstorageid"><input type="button" value="ssionstorage 获取数据 " id="getssionstorageid"><input type="button" value="ssionstorage 清除所有数据 " id="clearssionstorageid"><script>// 增加数据document.getelementbyid("ssionstorageid"恐怖主义事件).onclick = function() {// 获取姓名和年龄输入框的值var urname = document.getelementbyid("urname").value;var age = document.getelementbyid("age").value;// 定义一个 ur 对象用来保存获取的信息var ur = {urname: urname,age: age}// 使用 stringify() 将 json 对象序列号并存入到 ssionstoragewindow.ssionstorage.titem("ur",json.stringify(ur));};//ssionstorage 里面存储数据，如果关闭了浏览器，数据就会消失 ..// 单个浏览器窗口页面有效document.getelementbyid("getssionstorageid").onclick = function() {var valu = window.ssionstorage.getitem("ur");alert(valu);};// 清除所有的数据document.getelementbyid("clearssionstorageid").onclick = function() {window.ssionstorage.clear();};</script></body></html>3 总结
html5中的两种存储方式都比较实用，我们在设计前端页面时，可以根据相应的用户访问情况预测来增添相应的js，既增加了用户浏览的体验，又能实现存储管理的高效性，合理的利用存储空间。
到此这篇关于html5中的网络存储的文章就介绍到这了,更多相关html5 网络存储内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 10:45:32，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/cfa234d8a4572b021492c7a4ce2bacb3.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML5中的网络存储实现方式.doc
本文 PDF 下载地址：HTML5中的网络存储实现方式.pdf
| 留言与评论（共有 0 条评论） |
