Castro Carazo University

Faculty of Engineering

Subject
Programming VI

Research work

Theme
HTML5 Local Storage & Session Storage

Members

Jenner Castro Díaz

Wesley Cascante Burford
Edwin Sojo Arroyo

Second Semester

Year
2023

page 1
Table of contents

Table of contents......................................................................................... 2
What is HTML?................................................................................................. 3
What is HTML5?............................................................................................... 4
What is HTML5 used for? ................................................................................... 5
What are the news?
Advantages of using HTML5 ................................................................. 6
What does an HTML5 developer do?? ................................................................ 6
What are the two types of web storage in HTML5?? ....................... 7
What is HTML5 Local Storage?
How to use LocalStorage?......................................................... 8
What is Session Storage in HTML5?
Conclusion
Bibliography ....................................................................................................... 10

page 2
What is HTML?

Defining it simply, "HTML is the language used to create

the web pages accessed via the internet." More specifically,
HTML is the language with which most web pages are 'written'.

Designers use the HTML language to create web pages, the

programs that are used generate pages written in HTML and the
browsers we use (for example, Google Chrome, Opera or Mozilla)
Firefox displays web pages after reading and interpreting their content.
HTML.

The origin of HTML dates back to 1980, when the physicist Tim Berners-Lee,
CERN researcher (European Organization for Nuclear Research)
he proposed a new 'hypertext' system for sharing documents.

Hypertext systems had been developed years earlier. In the field

from computer science, hypertext allows users to access the
information related to the electronic documents they view. In
in a certain way, the primitive hypertext systems could be likened to the
links of the current web pages.

After completing the development of his system, Tim Berners-Lee presented it to a

call organized to develop a hypertext system for
internet. After joining forces with systems engineer Robert
Cailliau presented the winning proposal called WorldWideWeb (W3).
The first formal document with the description of HTML was published in 1991.
the name 'HTML Tags' can still be consulted today
online as a computer relic.

The first official proposal to turn HTML into a standard was made in
1993 by the IETF (Internet Engineering Task Force). Although
significant progress was made (during this time the
labels for images, tables and forms) neither of the two proposals
standard, HTML and HTML+ became standard
official.

In 1995, the IETF organized an HTML working group and on the 22nd
In September, they published the HTML 2.0 standard. Despite its name, HTML 2.0
it is the first official standard of HTML.

Since 1996, the HTML standards are published by another organization.

standardization, the W3C. Version HTML 3.2 was published on January 14
1997 and it is the first HTML recommendation published by the W3C. This
review incorporates the latest developments of the websites developed until
1996, like Java applets and text flowing around images.

page 3
HTML 4.0 was published on April 24, 1998 (corrected version of the publication
from December 18, 1997) and represented a great leap from the versions
previous ones. Among its most notable features are the sheets of
CSS styles, the ability to include small programs or scripts in the
web pages, improvement of the accessibility of the designed pages, tables
complex and improvements in the forms.

The last official specification of HTML was published on December 24, 1999.
and it is called HTML 4.01. It is a review and update of the
HTML version 4.0, so it does not include significant updates.

Since the publication of HTML 4.01, the standardization activity of HTML

it stopped and the W3C focused on the development of the XHTML standard. For this
reason, in the year 2004, the companies Apple, Mozilla, and Opera showed their
concern about the lack of interest from the W3C in HTML and decided to organize themselves
in a new association called WHATWG (Web Hypertext Application
Technology Working Group). The current activity of WHATWG focuses on the
HTML5 standard, whose first official draft was published on January 22
2008. Due to the strength of the companies that make up the WHATWG group and to the
publication of the drafts of HTML 5.0, in March 2007 the W3C decided
resume the standardizing activity of HTML.

HTML5 is already a standard (recommended), the W3C consortium, with the inventor of
The Web Sir Tim Berners-Lee presented the final version on October 27, 2014.
His intention is to build what has been called the Open Web Platform,
where HTML5, along with Javascript and CSS3, can be used for development
of cross-platform applications (Linux, Windows, Android, iOS..).

What is HTML5?

HTML5 is the latest version of HyperText Markup Language (Language of

Marcado de Hipertexto). Combina tres tecnologías web: HTML, para construir
the structure of the page; CSS, to improve the presentation; and JavaScript,
to add functionality to HTML elements. Its tags or markings
they make texts, images, and multimedia elements visible
correctly on the screen, and that the websites have a format
unified, standardized and compatible with different browsers, such as
Chrome, Edge, Firefox y Safari.

p. 4
What is HTML5 for?

The functions of HTML5 are not limited to defining the configuration.

basic of a web page. Let's see the most outstanding features of this
versión:

Incorporate multimedia elements without using other plugins, such as Adobe Flash.
This helps to reduce the size of a document and the loading time.

Add geolocation options to improve user experience

offering to change the language or redirect to a specific page
depending on the region.

It allows you to create 2D animations and include specific actions for the keyboard.
the mouse or the game controller to interact with a page.

Develop web applications with adaptive design that are accessible from
any type of devices: tablets, smartphones, desktop computers
and even Smart TV televisions.

What are the news?

Compared to previous versions, HTML5 introduces many

improvements to solve complex problems. The new features include:

Semantic tags (<header>, <nav>, <section>, <article>, <footer>, etc.),

Multimedia tags (<audio> and <video>),

New forms of control, such as attributes, input types, progress bar,

etc.

The <canvas> tag for 2D drawings using JavaScript,

The <svg> tag for vector-based drawings, shapes, pie charts

and bars, maps, etc.

Geolocation to detect the user's location.

Web storage of up to 5 MB of data on the Front End.

New events in JavaScript, such as drag and drop, etc.

page 5
Advantages of using HTML5

It is free: you don't need any expensive software to start programming.

The language has a clear, orderly, and easy to learn code.

HTML5 is compatible with the most popular web browsers and has a
responsive design.

Descriptive tags provide better search engine positioning

like Google.

HTML5 supports multimedia and interactive functionalities.

APIs allow the inclusion of complex elements, such as 3D drawings or maps.

directly in the document.

SQL queries can be executed.

HTML5 allows the creation of web applications.

The language optimizes the loading time of a website.

The website information is better protected.

What does an HTML5 developer do?

Knowledge of HTML5 is a widely held skill among

web designers. A professional programmer masters the rules of this
language for building responsive and updated websites. The
HTML5 developers use specialized programs; according to a study
(en inglés) de Stack Overflow Developer Survey 2021, entre los editores de
The most popular HTML editors are Visual Studio Code, Notepad++, Sublime Text, and
Atom. Working with HTML5 allows for the creation of highly efficient websites.
for search engine algorithms, thanks to the tags, as for the
users, through the visual design of web pages developed with the
CSS language.

Learn to create websites and launch your career in the IT sector with our
Online Front End Development course from zero to pro. Our teachers
experts will teach you to program in HTML, create designs with CSS, animate
web pages with JavaScript and much more. You will do practical activities during
the course, at your pace and from anywhere, with personalized feedback from
tutor. At the end of the course, you will complete four professional projects that

page 6
they will enrich your portfolio, you will receive the EBAC certificate and you will have access to
the lifelong platform.

What are the two types of web storage in HTML5?

This storage API offers two possibilities to save data in the

browser: sessionStorage and localStorage.

The difference between localStorage and sessionStorage is that the information

Stored with localStorage is saved indefinitely until it is
deleted through code or deleted from the browser and with
sessionStorage stores the information until the browser is closed.

What is HTML5 Local Storage?

LocalStorage is a tool compatible with HTML5 and the browsers that

They support it, even Explorer from version 8 and above.

The grace of this is the ability to store data locally in the

browser that the user uses while browsing. This information will remain
stored forever in each new session that the user starts in their
browser, unless we want to delete it for some reason.

LocalStorage works similarly to cookies, however, it has

with a space of 5mb and when working locally, it does not need to do
server requests.

It is a very commonly used type of storage and access to information is

quite quickly. The most important features of this space
storage are:

• It is based on the key-value format.

• It has no expiration date, unless the browser is cleared of
explicit form using the browser's own settings or by code in
JavaScript.
• It can store up to 10MB of data, depending on the browser.
• Only scripts from the same origin can access the data.
• It can be shared between different tabs.
• No data is sent to the server, it is for the exclusive use of the client.
• The stored data is of text type.

page 7
How is LocalStorage used?

LocalStorage is a tool that is used via JavaScript, where

we can manipulate our stored data in the way we see fit
more convenient. To start using localStorage, we need to have the
following methods into account:

[Link]("key", item);

This is the method to store information in our localStorage. In the

In the first parameter 'key', we enter the name of our element, and in the
parameter 'item' we enter its value.

Example:

[Link](“userID”, 10);

In this particular case, I am storing an item in my localStorage.

llamado “userID” con elvalor de 10.

The most appropriate way to work with Local Storage would be:

To store an element:

[Link](“key”, “value”)

To obtain an element:

[Link]("key")

To remove an element:

[Link]("key")

To clear all the information:

[Link]()

What is Session Storage in HTML5?

It is a type of storage in the browser very similar to Local Storage.

They share many of their main characteristics but the biggest difference
the Session Storage cannot be shared between different tabs. The
Another major difference is that the information persists while the tab is open.
open, which lasts the user's session. The most important features
son:

page 8
 • It is also based on the key-value format.
• The information persists until the tab or window is closed.
even with a page reload.
• Stores between 5 and 10MB of data, depending on the browser you use.
use.
• Only scripts from the same origin can access the data.
• It is limited to use within the same tab, it cannot be shared.
information between windows or tabs.
• It is for client-side exclusive use.
• The format of the information that is stored is text type.

The most appropriate way to work with Session Storage would be:

To store an element:

[Link](“key”, “value”)

To obtain an element:

[Link]("key")

To remove an element:

[Link]("key")

To clear all the information:

[Link]()

Conclusion

The use of localStorage and sessionStorage in HTML5 provides a way

convenient to store data on the client, either persistently or
temporarily during a session. These APIs are widely used in the
web development to improve user experience and maintain data
relevant in the browser.

page 9
Bibliography

Date: July 8, 2023.

[Link]

Fecha: 8 de julio, 2023.

[Link]

Fecha: 8 de julio, 2023.

[Link]
The origin of HTML is...
or developed years ago.

Fecha: 8 de julio, 2023.

[Link]
HTML5 is the latest version of HTML, the standard markup language for creating web pages.
personality to HTML elements

Fecha: 8 de julio, 2023.

[Link]
What is LocalStorage?
the user while browsing

Fecha: 8 de julio, 2023.

[Link]
clear()
Session Storage can be shared between different tabs
3% measures

page 10