HTML 5 is the latest version of HTML that includes new semantic elements, forms, audio/video playback, canvas, and geolocation. It introduces several new features like local storage, drag and drop, and cross document messaging. The document provides an introduction to HTML5 and describes some of its new elements and features including audio/video playback, canvas drawing, forms, and data storage APIs. It also compares HTML5 to older HTML versions and provides instructions on getting started with HTML5.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
This presentation gives some superficial information on the mobile BeTrains application developed for devices supporting the Qt framework (Maemo, MeeGo, Symbian). Presentation given at the iRail meeting of february 2011.
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Vskills certified html5 developer Notes covers the following topics.
HTML5
Introduction
History
HTML Versions
HTML5 Enhancements
Elements, Tags and Attributes
Head and body tags
HTML Editor
Create a web page
Viewing the Source
White Space and Flow
HTML Comments
HTML Meta Tags
HTML Attributes
XHTML First Line
DTD (Document Type Declaration)
HTML5 new Doctype and Charset
Special Characters
Capitalization
Quotations
Nesting
Spacing and Breaks
HTML5 Global attributes
http://www.vskills.in/certification/Web-Development/Certified-HTML5-Developer
A workshop hosted by the South African Journal of Science aimed at postgraduate students and early career researchers with little or no experience in writing and publishing journal articles.
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
This slide is special for master students (MIBS & MIFB) in UUM. Also useful for readers who are interested in the topic of contemporary Islamic banking.
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
A review of the growth of the Israel Genealogy Research Association Database Collection for the last 12 months. Our collection is now passed the 3 million mark and still growing. See which archives have contributed the most. See the different types of records we have, and which years have had records added. You can also see what we have for the future.
Safalta Digital marketing institute in Noida, provide complete applications that encompass a huge range of virtual advertising and marketing additives, which includes search engine optimization, virtual communication advertising, pay-per-click on marketing, content material advertising, internet analytics, and greater. These university courses are designed for students who possess a comprehensive understanding of virtual marketing strategies and attributes.Safalta Digital Marketing Institute in Noida is a first choice for young individuals or students who are looking to start their careers in the field of digital advertising. The institute gives specialized courses designed and certification.
for beginners, providing thorough training in areas such as SEO, digital communication marketing, and PPC training in Noida. After finishing the program, students receive the certifications recognised by top different universitie, setting a strong foundation for a successful career in digital marketing.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
2. CONTENTS
Introduction
New Features
New Elements
Comparison With Older Versions
Getting Started With HTML5
Structure of a Web Page
Forms
Audio and Video
HTML5 Canvas
Introduction to Data Storage
Introduction to Geo location
3. INTRODUCTION
• HTML 5 is the new version of
o HyperText Markup Language (HTML): text with tags for content
o JavaScript: scripting/programming language for interactivity, dynamic presentation
o Cascading Style Sheets: formatting
• Many new features, for support of semantic web, dynamic/interactive
websites
• CAUTION: definition not official.
• Browser support evolving.
4. • Successor of HTML 4.01 and XHTML 1.1
• It comes with new tags, features and APIs
• 84% of Developers Plan to Adopt Key HTML5 Features
• The key to understanding HTML5 is that it is not one, but a group of
technologies. Within HTML5, developers have a tremendous amount of
choice regarding what they use and what they don’t use
• The power of HTML5 being ready for prime-time can be seen in
Microsoft’s choice to utilize it in Windows 8
5. NEW FEATURES
• Semantic elements: header, footer, section, article, others.
• canvas for drawing
paths of rectangles, arcs, lines, images
mouse events
• localStorage (variation of cookies)
• audio & video elements
including drawing video on canvas
6. • New structural elements (<header>, <footer>, <nav> and more)
• Forms 2.0 and client-side validation
• Native browser support for audio and video (<video>, <audio>)
• Canvas API and SVG
• Web storage
• Offline applications
• Geolocation
• Drag & Drop
• Web Workers
• New communications API (Server Sent Events, Web Sockets, …)
7. NEW ELEMENTS
An HTML page first starts with the DOCTYPE declaration
<section> <article> <aside> <hgroup>
<header> <audio> <time> <command>
<footer> <source> <ruby> <details>
<nav> <embed> <rt> <summary>
<figure> <mark> <rp> <datalist>
<figcaption> <progress> <wbr> <keygen>
<video> <meter> <canvas> <output>
8. • HTML5 also update some of the previous existing elements to better reflect
how they are used on the Web or to make them more useful such as:
The <a> element can now also contain flow content instead of just content mouse
events
The <hr> element is now representing a paragraph-level thematic break
The <cite> element only represent the title of a work
The <strong> element is representing importance rather than strong emphasis
9. COMPARISON WITH OLDER VERSIONS
HTML HTML5
• DOCTYPE is much longer as HTML4 is based on
SGML-based.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd”>
• DOCTYPE is required to enable standards
mode for HTML documents.
<!DOCTYPE html>
• Audio and Video are not part of HTML4
specification.
• Audio and Videos are integral part of
HTML5 specifications
e.g. <audio> and<video> tags.
• Vector Graphics is possible with the help of
technologies such as VML, Silverlight etc
• Vector graphics is integral part of HTML5
e.g. SVG and canvas
• Works with all old browsers • Most of modern browser have started
supporting HTML5 specification e.g.
Firefox, Mozilla, Opera, Chrome, Safari etc.
10. • It is almost impossible to get true
GeoLocation of user browsing any website
especially if it comes to mobile devices.
• JS GeoLocation API in HTML5 helps identify
location of user browsing any website
(provided user allows it)
• Browser cache can be used as temporary
storage.
• Application Cache, Web SQL database and
Web storage is available as client side storage.
Accessible using JavaScript interface in
HTML5 compliant browsers.
• Web Sockets are not available. Generally used
mechanisms are long polling and streaming.
• Full duplex communication channels can be
established with Server using Web Sockets.
Accessible using JavaScript interface in
HTML5 compliant browsers.
• Does not allow JavaScript to run in browser.
JS runs in same thread as browser interface.
• Allows JavaScript to run in background. This
is possible due to JS Web worker API in
HTML5
11. GETTING STARTED WITH HTML5
• Any Text editor such as Notepad++, Editplus,
Textmate, Dream weaver
• Modern browsers such as Firefox 3.5 +, IE9, chrome,
safari
12. STRUCTURE OF WEB PAGE
• New and Updated HTML5 Elements
• First HTML5 webpage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
That’s all I need to create my first HTML5 page
</body>
</html>
13. • New Semantic Elements
<nav>: Represents a major navigation block. It groups links to other pages or to parts
of the current page.
<nav> does not have to be used in every place you can find links. For instance, footers
often contains links to terms of service, copyright page and such, the <footer> element
would be sufficient in that case
<nav>
<ul>
<li><a href=“/”>Home</a></li>
<li><a href=“/events”>Current events</a></li >
<li><a href=“/Contact”>Contact us</a></li >
</ul>
</nav>
14. <header> tag specifies a header for a document or section.
<article> The web today contains a ocean of news articles and blog entries. That gives W3C a good reason
to define an element for article instead of <div class="article">.
We should use article for content that we think it can be distributable. Just like news or blog entry
can we can share in RSS feed
"article" element can be nested in another "article" element.
An article element doesn't just mean article content. You can have header and footer element in an
article. In fact, it is very common to have header as each article should have a title.
<aside> The "aside" element is a section that somehow related to main content, but it can be separate from
that content
<footer> Similarly to "header" element, "footer" element is often referred to the footer of a web page. Well,
most of the time, footer can be used as what we thought.
Please don't think you can only have one footer per web document, you can have a footer in every
section, or every article.
15. <progress> The new "progress" element appears to be very similar to the "meter" element. It is created to
indicate progress of a specific task.
<meter> "Meter" is a new element in HTML5 which represenet value of a known range as a gauge. The
keyword here is "known range". That means, you are only allowed to use it when you are clearly
aware of its minimum value and maximum value.
<mark> The mark <mark> element represents a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context.
Basically, it is used to bring the reader's attention to a part of the text that might not have been
<figure> The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent
of the main flow, and if removed it should not affect the flow of the document
18. FORMS
HTML5 web forms have introduced new form elements, input types,
attributes, and other features. Many of these features we’ve been using in our
interfaces for years: form validation, combo boxes, placeholder text, and the
like. The difference is that where before we had to resort to JavaScript to
create these behaviors, they’re now available directly in the browser; all you
need to do is set an attribute in your markup to make them available.
• HTML5 Form Attributes
• HTML5 Input Types
• HTML5 Form Elements
19. • HTML5 FORM ATTRIBUTES
<form> / <input> autocomplete Attribute
The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off. When autocomplete is on, the browser automatically complete
values based on values that the user has entered before.
Example: ../forms/autocomplete.html
<input> autofocus Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when
the page loads. Only one form element can have autofocus in a given page.
Example: ../forms/autofocus.html
20. <input> formaction Attribute
The formaction attribute specifies the URL of a file that will process the input control when
the form is submitted.The formaction attribute overrides the action attribute of the <form>
element.The formaction attribute is used with type="submit" and type="image"
Example: ../forms/formaction.html
<input> formmethod Attribute
The formmethod attribute defines the HTTP method for sending form-data to the action
URL.The formmethod attribute overrides the method attribute of the <form> element.
The formmethod attribute can be used with type="submit" and type="image".
Example: ../forms/formmethod.html
21. <input> formnovalidate Attribute
The novalidate attribute is a boolean attribute. When present, it specifies that the <input>
element should not be validated when submitted. The formnovalidate attribute overrides the
novalidate attribute of the <form> element.
Example: ../forms/formnovalidate.html
<input> formtarget Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
Note: The formnovalidate attribute can be used with type="submit".
Example: ../forms/formtarget.html
22. <input> list Attribute
Datalists are currently only supported in Firefox and Opera, but they are very cool.
They fulfill a common requirement: a text field with a set of predefined autocomplete
options.
Example: ../forms/datalist.html
<input> required Attribute
The Boolean required attribute tells the browser to only submit the form if the field
in question is filled out correctly. Obviously, this means that the field can’t be left
empty, but it also means that, depending on other attributes or the field’s type, only
certain types of values will be accepted.
The required attribute can be set on any input type except button, range, color,
and hidden, all of which generally have a default value.
Example: ../forms/required.html
23. <input> placeholder Attribute
The placeholder attribute allows a short hint to be displayed inside the form element,
space permitting, telling the user what data should be entered in that field.
The placeholder text disappears when the field gains focus, and reappears on blur
if no data was entered.
Example: ../forms/placeholder.html
<input> readonly Attribute
The readonly attribute is similar to the disabled attribute: it makes it impossible
for the user to edit the form field. Unlike disabled, however, the field can receive
focus, and its value is submitted with the form.
24. <input> multiple Attribute
The multiple attribute, if present, indicates that multiple values can be entered in
a form control. While it has been available in previous versions of HTML, it only applied to
the select element. In HTML5, it can be added to email and file input types as well.
Select images: <input type="file" name="img" multiple="multiple" />
<input> formtarget Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
Example: ../forms/formtarget.html
25. • INPUT TYPES
search week
email time
ur datetime-local
tel number
datetime range
date color
month
26. <input type> search
The search type is used for search fields
Search type is only supported in Chrome, Opera, and
safari.
<input type> email
The email type (type="email") is, unsurprisingly, used for specifying one or more email
addresses.
It supports the Boolean multiple attribute, allowing for multiple, comma-separated email
addresses.
Search type is only supported in Chrome, Opera, firefox and safari.
E-mail: <input type="email" name="usermail" />
27. <input type> url
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
Search type is only supported in Chrome, Opera, firefox
Add your homepage: <input type="url" name="homepage" />
<input type> tel
For telephone numbers, use the tel input type (type="tel"). Unlike the url and email types,
the tel type doesn’t enforce a particular syntax or pattern. Letters and numbers—indeed, any
characters other than new lines or carriage returns—are valid.
Telephone: <input type="tel" name="usrtel" />
28. <input type> range
The range input type (type="range") displays a slider control in browsers that
support it (currently Opera and WebKit). As with the number type, it allows the
min, max, and step attributes.
Define a control for entering a number whose exact value is not important
<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
<input type="range" min="1" max="10" name="rating" type="range">
<input type> color
The color input type (type="color") provides the user with a color picker
Supported only in Opera
Select your favorite color: <input type="color" name="favcolor" />
29. • HTML5 FORM ELEMENTS
<input type> keygen
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.When the form is
submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server. The public
key could be used to generate a client certificate to authenticate the user in the future.
<input type> output
The <output> element represents the result of a calculation (like one performed by a
script).
30. HTML 5 AUDIO & VIDEO
<audio>
Until now, there has not been a standard for playing audio files on a web page. Today,
most audio files are played through a plug-in (like flash). However, different browsers
may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio
file on a web page: the <audio> element.
Example: ../audioVideo/audio.html
Browser support :: IE9,FireFox,Opera,Chrome, Safari
31. <video>
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers
may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on
a web page: the <video> element.
Browser support :: IE9,FireFox,Opera,Chrome, Safari
32. CANVAS
With HTML5’s Canvas API, we’re no longer limited to drawing rectangles on our sites.
We can draw anything we can imagine, all through JavaScript. This can improve
the performance of our websites by avoiding the need to download images off the
network.With canvas, we can draw shapes and lines, arcs and text, gradients and patterns.
In addition, canvas gives us the power to manipulate pixels in images and even video.
The Canvas 2D Context spec is supported in:
■ Safari 2.0+ ■ Chrome 3.0+ ■ Firefox 3.0+ ■ Internet Explorer 9.0+
■ Opera 10.0+ ■ iOS (Mobile Safari) 1.0+ ■ Android 1.0+
33. Creating a canvas Element
The first step to using canvas is to add a canvas element to the page
<canvas id=“mycanvas”>sorry!!!</canvas>
Onload of the page we triggering draw(); method
Drawing a canvas element
We will add the function to our script elemenr. The first step is to grab hold of the canvas
element on our page:
<script>
..
function draw( ) {
var canvas = document.getElementById(“myCanvas”);
</script>
34. Filling brush with color
<script>
Function draw() {
var canvas=document.getElementById(“mycanvas”);
var context=canvas.getContext(“2d”);
context.strokeStyle =“red”;
context.fillStyle=“blue”
context.fillRect=(10,10,100,100);
context.strokeRect(10,10,100,100);
}
</script>
35. Create circle using canvas
<script type=“text/javascript”>
Function draw() {
var canvas=document.getElementById(“mycanvas”);
var context=canvas.getContext(“2d”);
context.fillStyle=“blue”
context.beginPath();
context.arc=(70,18,15,0,Math.PI*2,true);
context.closePath();
context.fill();
}
</script>
36.
37.
38.
39.
40. GEOLOCATION
The first new API we’ll cover is geolocation. Geolocation allows your visitors to share
their current location.
Depending on how they’re visiting your site, their location may be determined by any of
the following:
■ IP address ■ wireless network connection ■ cell tower■ GPS hardware on the device
Privacy Concerns
Not everyone will want to share their location with you, as there are privacy concerns
inherent to this information. Thus, your visitors must opt in to share their location.
Nothing will be passed along to your site or web application unless the user agrees.
The decision is made via a prompt at the top of the browser. Figure 10.1 shows what
this prompt looks like in Chrome.
41. Using geolocation
With geolocation, you can determine the user’s current position. You can also be notified of
changes to their position, which could be used, for example, in a web application that
provided real-time driving directions.
Geolocation: methods
These different tasks are controlled through the three methods currently available
in the Geolocation API:
■ getCurrentPosition
■ watchPosition
■ clearPosition
42. WEB STORAGE
The Web Storage API defines a standard for how we can save simple data locally on a
user’s computer or device. Before the emergence of the Web Storage standard, web
developers often stored user information in cookies, or by using plugins. With Web
Storage, we now have a standardized definition for how to store up to 5MB of simple data
created by our websites or web applications. Better still, Web Storage already works in
Internet Explorer 8.0!
Web Storage is a great complement to Offline Web Applications, because you need
somewhere to store all that user data while you’re working offline, andWeb Storage
provides it.
43. Two kinds of storage
Session Storage
Session storage lets us keep track of data specific to one window or tab. It allows us to
isolate information in each window. Even if the user is visiting the same site in two
windows, each window will have its own individual session storage object and thus have
separate, distinct data.
Session storage is not persistent—it only lasts for the duration of a user’s session
on a specific site (in other words, for the time that a browser window or tab is open
and viewing that site).
Local Storage
Unlike session storage, local storage allows us to save persistent data to the user’s computer,
via the browser. When a user revisits a site at a later date, any data saved to local storage can
be retrieved.
44. Local storage v/s Cookies
Local storage can at first glance seem to play a similar role to HTTP cookies, but there
are a few key differences. First of all, cookies are intended to be read on the server side,
whereas local storage is only available on the client side.
If you need your server-side code to react differently based on some saved values,
cookies are the way to go. Yet, cookies are sent along with each HTTP request to your
server and this can result in significant overhead in terms of bandwidth.
Local storage, on the other hand, just sits on the user’s hard drive waiting to be read, so it
costs nothing to use.
In addition, we have significantly more size to store things using local storage. With
cookies, we could only store 4KB of information in total.
With local storage, the maximum is 5MB.
45. getItem and setItem methods
We store a key/value pair in either local or session storage by calling setItem, and
we retrieve the value from a key by calling getItem. If we want to store the data in or retrieve
it from session storage, we simply call setItem or getItem on the sessionStorage global
object.
If we want to use local storage instead, we’d call setItem or getItem on the localStorage
global object.
For example, if we’d like to save the value "6“ under the key "size", we’d call setItem
like this:
localStorage.setItem("size", "6");
To retrieve the value we stored to the "size" key, we’d use the getItem method, specifying
only the key:
var size = localStorage.getItem("size");
ShortCut
var size = localStorage["size"];
Convert stored data using var size = parseInt(localStorage.getItem("size"));
46. Remember me functionality using local storage
We can use Web Storage to add a “Remember me on this computer” checkbox to
our registration page. This way, once the user has registered, any other forms they
may need to fill out on the site in the future would already have this information.
onready 2 methods are called
1. Loading stored details
2. On checkbox check trigger save data method
47. viewing localstorage values with web inspector
We can use the Safari or ChromeWeb Inspector to look at, or even change, the values
of our local storage. In Safari, we can view the stored data under the Storage tab, as
shown in Figure