web应用程序开发,web前端工程师是干什么的

##前言

随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择。HTML的Web Storage API是一个理想的解决方案。如果是存储复杂的数据,则可以借助Web SQL Database API来实现,可以使用SQL语句完成复杂数据的存储与查询。本文向大家介绍一下HTML5中的本地存储功能。

##本章知识点

  • 了解Web Storage的优势
  • 理解localStorage与sessionStorage的区别
  • 掌握设置和获取Storage数据的方法
  • 掌握Storage API的属性和方法
  • 了解本地数据库Web SQL

使用HTML5的Web Storage功能,可以在客户端存储更多的数据,而且可以实现数据在多个页面中共享甚至是同步。

###1、cookie存储数据的不足
cookie可用于在程序员间传递少量的数据,对于Web应用来说,它是一个在服务器和客户端之间来回传送文本值的内置机制,服务器可以根据cookie来追踪用户在不同页面的访问信息。正因为它卓越的表现,在目前的Web应用中,cookie得到了最为广泛的应用。

尽管如此,cookie仍然有很多不尽如人意的地方,主要表现在以下方面。
1、大小的限制
cookie的大小被限制在4KB。在Web的富应用环境中,不能接受文件或邮件那样的大数据。
2、带宽的限制
只要有涉及cookie的请求,cookie数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面,cookie数据都会消耗网络的带宽。
3、安全风险
由于cookie会频繁地在网络中传送,而且数据在网络中是可见的,因此在不加密的情况下,是有安全风险的。
4、操作复杂
在客户端的浏览器中,使用JavaScript操作cookie数据是比较复杂的。但是服务器可以很方便地操作cookie数据

###2.使用Web Storage存储的优势
Web Storage可以在客户端保存大量的数据,而且通过其提供的接口,访问数据也非常的方便。然而,Web Storage的诞生并不是为了替代cookie,相反,是为了弥补cookie在本地存储中表现的不足。
Web Storage本地存储的优势主要表现在以下几个方面。
1、存储容量
提供更大的存储容量。在Firefox、Chrome、Safari和Opera中,每个网域为5MB;在IE8及以上为10MB。
2、零带宽
Web Storage 因为是本地存储,不与服务器发生交互行为,所以不存在带宽的占用。
3、编程接口
Web Storage提供了一套丰富的编程接口,使得数据操作更加方便
4、独立的存储空间
每个域都有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据的混乱。
由此可见,Web Storage并不能完全替代cookie,cookie能做的事情,Web Storage不一定能做到,如服务器可以访问cookie数据,但是不能访问Web Storage数据。所以Web Storage和cookie是相互补充的,会在各自不同领域发挥作用。
随着移动互联网的发展,浏览器端的富应用必然是一种趋势。

###3. 会话存储(sessionStorage)和本地存储(localStorage)的区别
Web Storage包括会话存储(sessionStorage)和本地存储(localStorage)。熟悉Web变成的人员第一次接触Web Storage时,会自然的与session和cookie去对应。不同的是,cookie和session完全是服务器端可以操作的数据,但是sessionStorage和localStorage则完全是浏览器客户端操作的数据。
sessionStorage和localStorage完全继承同一个Storage API,所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的主要区别在于数据存在的时间范围和页面范围。
我画了一个sessionStorage和localStorage区别表,大家看一下:

###4. 检查浏览器是否支持Web Storage
放到页面中的代码:

function CheckStorageSupport(){     
       if(window.sessionStorage){          
              console.log("浏览器支持sessionStorage特性!");    
      }else{          
              console.log("浏览器不支持sessionStorage特性!");    
      }    
      if(window.localStorage){        
              console.log("浏览器支持localStorage特性!");         
     }else{  
              console.log("浏览器不支持localStorage特性!");  
     }
 }
window.addEventListener("load",CheckStorageSupport,false);

控制台预览结果:
我就直接在控制台输入看结果了,读者可以把上面代码放入页面内,运行看下结果:

###5. 设置和获取Storage数据
sessionStorage和localStorage作为window属性,完全继承Storage API,它们提供操作数据的方法完全相同。下面以sessionStorage属性为例进行讲解。
1、保存数据到sessionStorage

window.sessionStorage.setItem("key","value");

Key为键,value为值,setItem()表示保存数据的方法。

2、从sessionStorage中获取数据
如果知道保存到sessionStorage中的key,就可以得到对应的值。sessionStorage获取数据的基本语法如下:

value = window.sessionStorage.getItem("key");

3、 设置和获取数据的其他写法
对于访问Storage对象还有更简单的方法,根据“键”和“值”的配对关系,直接在sessionStorage对象上设置和获取数据,可完全避免调用setItem()和getItem()方法。
保存数据的方法也可写为如下的形式。

window.sessionStorage.key = "value";

window.sessionStorage["key"]="value";

获取数据的方法更加直接,可写为如下形式:

value = window.sessionStorage.key;

value = window.sessionStorage["key"];
对于localStorage来说,同样具有上述设置数据和获取数据的方法。
代码示范:

###6. Storage API的属性和方法

在使用sessionStorage和localStorage时,以上的属性和方法都可以使用,但需要注意其影响的范围。

###7. 存储JSON对象的数据
1、序列化JSON格式的数据
由于Storage是以字符串保存数据的,因此在保存JSON格式的数据之前,需要把JSON格式的数据转换为字符串,称为序列化。可以使用JSON.stringify()序列化JSON格式的数据为字符串数据。使用方法如下:
var stringData = JSON.stringify(jsonObject);

以上代码把JSON格式的数据对象jsonObject序列化为字符串数据stringData。
2、把数据发序列化为JSON格式
如果把存储的Storage中的数据以JSON格式对象的方式去访问,需要把字符串数据转换为JSON格式的数据,成为反序列化。可以使用JSON.parse()反序列化字符串数据为JSON格式的数据。使用方法如下:
var jsonObject = JSON.parse(stringData);

以上代码把字符串数据stringData反序列化为JSON格式的数据对象jsonObject。
反序列化字符串为JSON格式的数据,也可以使用eval()函数,但eval()函数是把任意的字符串转换为脚本,有很大的安全隐患,但是JSON.parse()只反序列化JSON格式的字符串数据,如果字符串数据不符合JSON数据格式,则会产生错误,同时也减少安全隐患,但是执行效率方面eval()函数要快很多。
代码示范:



###8. Storage API的事件
有时候,会存在多个网页或标签页同时访问存储数据的情况。为保证修改的数据能够及时反馈到另一个页面,HTML5的Web Storage内建立一套事件通知机制,会在数据更新时触发。无论监听的窗口是否存储过数据,只要与执行存储的窗口是同源的,都会触发Web Storage事件。
例如下面的代码,添加监听事件后,即可接收同源窗口的Storage事件。
window.addEventListener("storage",EventHandle,true);
Storage是添加的监听事件,只要是同源的Storage事件发生,都能够因数据更新而出发事件。
Storage事件的接口如下所示:

interface StorageEvent : Event {    
    readonly attribute DOMString key;    
    readonly attribute DOMString ? oldValue;    
    readonly attribute DOMString ? newValue;    
    readonly attribute DOMString url;    
    readonly attribute Storage ? storageArea;
};

StorageEvent对象在事件触发时,会传递给事件处理程序,它包含了存储变化有关的所有必要的信息。
Storage事件的相关属性:

###9. 本地数据库Web SQL
为了进一步加强客户端的存储能力,HTML5引入了本地数据库的概念。 Web SQL Database的规范使用的是SQLite数据库,它允许应用程序通过一个异步的JavaScript接口访问数据库。
SQLite是一款轻型的数据库,遵循ACid的关系型数据库管理系统,它的优势是嵌入式,且占用资源非常低,只需要几百KB的内存就可以了。在跨平台方面,它能够支持Windows、Linux等主流操作系统,同时能够与很多程序语言如C#、PHP、Java、JavaScript等结合。它包含ODBC接口,在处理速度方面也非常可观。
Web SQL Database规范中定义了3个核心方法:

###10. Web SQL数据库基本操作
1、打开数据库
var db=openDatabase("TestDB","1.0","测试数据库",2*1024*1024,creation Callback);

该方式有5个必需的参数,第1个参数表示数据库名,第2个参数表示版本号,第3个参数表示数据库的描述,第4个参数表示数据库大小,第5个参数表示创建回调函数,其中第5个参数是可选的。

2、创建数据库

db.transaction(function(tx){
   tx.executeSql('CREATE TABLE IF NOT EXISTS UserName(id unique,Name)');
});

使用transaction()方法传递给回调函数的tx是一个transaction对象,然后使用transaction对象的executeSql()方法,可以执行SQL语句,这里的SQL语句就是创建数据表的命令。

3、添加数据至数据库表

db.transaction(function(tx){    
     tx.executeSql('INSERT INTO UserName(id,name) VALUES(1,"张三")');
     tx.executeSql('INSERT INTO UserName(id,name) VALUES(2,"李四")');
});

两个包含Insert INTO命令的SQL语句,表示插入数据,将会在本地数据库TestDB中的UserName表中添加两条数据。

4、读取数据库中的数据

db.transaction(function(tx){    
   tx.executeSql('SELECT * FROM UserName',[],function(tx,results){        
   var len = results.rows.length;        
   for(var i=0;i<len;i++){
       console.log(results.rows.item(i).Name);        
   },null);  
});

executeSql()方法中执行了包含select命令的SQL语句,表示查询,将从本地数据库TestDB中的UserName表中查询信息。查询出来的结果会传递给匿名的回调函数,可以在回调函数中处理查询的结果,如控制台输出结果。

以上文章希望对大家有帮助。

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等

详细大厂面试题答案、学习笔记、学习视频等资料领取,点击资料领取直通车免费领取!

前端视频资料:
。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等

详细大厂面试题答案、学习笔记、学习视频等资料领取,点击资料领取直通车免费领取!

[外链图片转存中…(img-mM4EEa4C-1627101758486)]

前端视频资料:

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…