HTML5中的网络存储实现方式


Posted in HTML / CSS onApril 28, 2020

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中的方法属性

方法属性 描述
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   里面数据的数据保存到 localStorage

var  username=document.getElementById("username").value;

window.localStorage.setItem("username",username);

};

document.getElementById("getlocalStorageId").onclick=function(){

// 获取数据,从 localStorage

var  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 对象序列号并存入到 sessionStorage

window.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>

3 总结

HTML5中的两种存储方式都比较实用,我们在设计前端页面时,可以根据相应的用户访问情况预测来增添相应的js,既增加了用户浏览的体验,又能实现存储管理的高效性,合理的利用存储空间。

到此这篇关于HTML5中的网络存储的文章就介绍到这了,更多相关html5 网络存储内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
HTML中meta标签及Keywords
Apr 15 #HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 #HTML / CSS
You might like
php实现TCP端口检测的方法
2015/04/01 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
使用Python生成XML的方法实例
2017/03/21 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python中列表和元组的区别
2017/12/18 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
使用python实现多维数据降维操作
2020/02/24 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
C#公司笔试题
2014/03/28 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
优秀的计算机专业求职信范文
2013/12/27 职场文书
鸿星尔克广告词
2014/03/21 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014年度工作总结报告
2014/12/15 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
法定代表人免职证明
2015/06/24 职场文书
如何撰写促销方案?
2019/07/05 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
关于python爬虫应用urllib库作用分析
2021/09/04 Python