LocalStorage

LocalStorage in JavaScript: How to

To use localStorage in your web applications, there are five methods to choose from:

  1. setItem(): Add key and value to localStorage
  2. getItem(): Retrieve a value by the key from localStorage
  3. removeItem(): Remove an item by key from localStorage
  4. clear(): Clear all localStorage
  5. key(): Passed a number to retrieve nth key of a localStorage

setItem()

This method just as the name implies allows you to store values in the localStorage object.

It takes two parameters, a key and a value. The key can be referenced later to fetch the value attached to it.

window.localStorage.setItem('name', 'Obaseki Nosa');

Where name is the key and Obaseki Nosa is the value. Also note that localStorage can only store strings.

To store arrays or objects you would have to convert them to strings.

To do this we use the JSON.stringify() method before passing to setItem().

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem('user', JSON.stringify(person));

getItem()

The getItem() method allows you to access the data stored in the browser’s localStorage object.

It accepts only one parameter which is the key and returns the value as a string.

To retrieve the user key stored above:

window.localStorage.getItem('user');

This returns a string with value as;

“{“name”:”Obaseki Nosa”,”location”:”Lagos”}”

To use this value, you would have convert it back to an object.

To do this, we make use of JSON.parse() method which converts a JSON string into a Javascript Object.

JSON.parse(window.localStorage.getItem('user'));

removeItem()

The removeItem() method when passed a key name, will remove that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.

window.localStorage.removeItem('name');

clear()

This method, when invoked clears the entire storage of all records for that domain. It does not receive any parameters.

window.localStorage.clear();

key()

The key() method comes in handy in situations where you need to loop through keys and allows you pass a number or index to local storage to retrieve the name of the key.

var KeyName = window.localStorage.key(index);

LocalStorage JavaScript browser support

LocalStorage as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To be sure the browser supports localStorage, you can check using the following snippet:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage
    } else {
    // No web storage Support.
}

LocalStorage JavaScript limitations

As easy as it is to use localStorage, it is also easy to misuse it. The following are limitations and also ways to NOT use localStorage:

  • Do not store sensitive user information in localStorage
  • It is not a substitute for a server based database as information is only stored on the browser
  • LocalStorage is limited to 5MB across all major browsers
  • LocalStorage is quite insecure as it has no form of data protection and can be accessed by any code on your web page
  • LocalStorage is synchronous. Meaning each operation called would only execute one after the other

With these, we have been armed with the power of localStorage in our web applications.

Reference:

1- w3shools.org

HTML Tables

HTML Table Example

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

<table style=”width:100%”>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.



HTML Table – Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

Example

table, th, td {
  border: 1px solid black;
}

Remember to define borders for both the table and the table cells.


HTML Table – Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}


HTML Table – Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

th, td {
  padding: 15px;
}


HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

th {
  text-align: left;
}


HTML Table – Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
  border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.


HTML Table – Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name</th>
    <th colspan=”2″>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>


HTML Table – Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan=”2″>Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>


HTML Table – Adding a Caption

To add a caption to a table, use the <caption> tag:

Example

<table style=”width:100%”>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Note: The <caption> tag must be inserted immediately after the <table> tag.


A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

Example

<table id=”t01″>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

And add more styles:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}


Chapter Summary

  • Use the HTML <table> element to define a table
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table

HTML Images

Images can improve the design and the appearance of a web page.


Example

<img src=”pic_trulli.jpg” alt=”Italian Trulli”>

Example

<img src=”img_girl.jpg” alt=”Girl in a jacket”>

Example

<img src=”img_chania.jpg” alt=”Flowers in Chania”>


HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:<img src=”url“>


The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

<img src=”img_chania.jpg” alt=”Flowers in Chania”>

If a browser cannot find an image, it will display the value of the alt attribute:

Example

<img src=”wrongname.gif” alt=”Flowers in Chania”>

Note: The alt attribute is required. A web page will not validate correctly without it.


Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

Example

<img src=”img_girl.jpg” alt=”Girl in a jacket” style=”width:500px;height:600px;”>

Alternatively, you can use the width and height attributes:

Example

<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>

The width and height attributes always defines the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.


Width and Height, or Style?

The widthheight, and style attributes are valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>
<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

</body>
</html>


Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

Example

<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>


Images on Another Server

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

Example

<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>


Animated Images

HTML allows animated GIFs:

Example

<img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”>


Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

<a href=”default.asp”>
  <img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
</a>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).


Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The image will float to the right of the text.</p>

<p><img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The image will float to the left of the text.</p>

Tip: To learn more about CSS Float, read our CSS Float Tutorial.


HTML Screen Readers

A screen reader is a software program that reads the HTML code, converts the text, and allows the user to “listen” to the content. Screen readers are useful for people who are visually impaired or learning disabled.


Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML <map> element to define an image-map
  • Use the HTML <area> element to define the clickable areas in the image-map
  • Use the HTML <img>‘s element usemap attribute to point to an image-map
  • Use the HTML <picture> element to show different images for different devices

Note: Loading images takes time. Large images can slow down your page. Use images carefully.

HTML Styles – CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

  • Inline – by using the style attribute in HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Tip: You can learn much more about CSS in our CSS Tutorial.


Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:

Example

<h1 style=”color:blue;”>This is a Blue Heading</h1>


Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

Example

<!DOCTYPE html>
<html>
<head>
  <link rel=”stylesheet” href=”styles.css”>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is how the “styles.css” looks:body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}


CSS Fonts

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


CSS Border

The CSS border property defines a border around an HTML element:

Example

p {
  border: 1px solid powderblue;
}


CSS Padding

The CSS padding property defines a padding (space) between the text and the border:

Example

p {
  border: 1px solid powderblue;
  padding: 30px;
}


CSS Margin

The CSS margin property defines a margin (space) outside the border:

Example

p {
  border: 1px solid powderblue;
  margin: 50px;
}


The id Attribute

To define a specific style for one special element, add an id attribute to the element:<p id=”p01″>I am different</p>

then define a style for the element with the specific id:

Example

#p01 {
  color: blue;
}

Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!


The class Attribute

To define a style for special types of elements, add a class attribute to the element:<p class=”error”>I am different</p>

then define a style for the elements with the specific class:

Example

p.error {
  color: red;
}


External References

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet:

Example

<link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”>

This example links to a style sheet located in the html folder on the current web site:

Example

<link rel=”stylesheet” href=”/html/styles.css”>

This example links to a style sheet located in the same folder as the current page:

Example

<link rel=”stylesheet” href=”styles.css”>


Chapter Summary

  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.


Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

Dodger

Blue

Medium

Sea

Green

Gray

Slate

Blue

Violet

Light

Gray


Background Color

You can set the background color for HTML elements:Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style=”background-color:DodgerBlue;”>Hello World</h1>
<p style=”background-color:Tomato;”>Lorem ipsum…</p>


Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>


Border Color

You can set the color of borders:

Hello World

Example

<h1 style=”border:2px solid Tomato;”>Hello World</h1>
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>
<h1 style=”border:2px solid Violet;”>Hello World</h1>


Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name “Tomato”:rgb(255, 99, 71)#ff6347hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:rgba(255, 99, 71, 0.5)hsla(9, 100%, 64%, 0.5)

Example

<h1 style=”background-color:rgb(255, 99, 71);”>…</h1>
<h1 style=”background-color:#ff6347;”>…</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>…</h1>

<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>…</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>…</h1>


RGB Value

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, greenblue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 107, 71)

RED255

GREEN107

BLUE71

Example

rgb(255, 0, 0)rgb(0, 0, 255)rgb(60, 179, 113)rgb(238, 130, 238)rgb(255, 165, 0)rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources:

Example

rgb(0, 0, 0)rgb(60, 60, 60)rgb(120, 120, 120)rgb(180, 180, 180)rgb(240, 240, 240)rgb(255, 255, 255)


HEX Value

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Example

#ff0000#0000ff#3cb371#ee82ee#ffa500#6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:

Example

#000000#3c3c3c#787878#b4b4b4#f0f0f0#ffffff


HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(huesaturationlightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Example

hsl(0, 100%, 50%)hsl(240, 100%, 50%)hsl(147, 50%, 47%)hsl(300, 76%, 72%)hsl(39, 100%, 50%)hsl(248, 53%, 58%)


Saturation

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

Example

hsl(0, 100%, 50%)hsl(0, 80%, 50%)hsl(0, 60%, 50%)hsl(0, 40%, 50%)hsl(0, 20%, 50%)hsl(0, 0%, 50%)


Lightness

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Example

hsl(0, 100%, 0%)hsl(0, 100%, 25%)hsl(0, 100%, 50%)hsl(0, 100%, 75%)hsl(0, 100%, 90%)hsl(0, 100%, 100%)


Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

Example

hsl(0, 0%, 0%)hsl(0, 0%, 24%)hsl(0, 0%, 47%)hsl(0, 0%, 71%)hsl(0, 0%, 94%)hsl(0, 0%, 100%)


RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, greenblue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example

rgba(255, 99, 71, 0)rgba(255, 99, 71, 0.2)rgba(255, 99, 71, 0.4)rgba(255, 99, 71, 0.6)rgba(255, 99, 71, 0.8)rgba(255, 99, 71, 1)


HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturationlightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):