Commit 98b26cb

authored

Merge pull request #42 from AzharAli-github/main

web-storage-API

2 parents ced23ea + 6961c9d commit 98b26cbCopy full SHA for 98b26cb

File tree

+60

-0

lines changed

JavaScript/Advance/Web API/web-storage API
- images
  - js-logo.png
- index.html
- script.js

+60

-0

lines changed

4.15 KB

Lines changed: 26 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,26 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <title>web-storage API</title>`
	`9`	`+</head>`
	`10`	`+`
	`11`	`+<body>`
	`12`	`+ <h1>Web Storage API</h1>`
	`13`	`+ <button onclick="DisplayOne()">View Doc</button>`
	`14`	`+ <p id="textOne"></p>`
	`15`	`+ <!-- Example One for localStorage() -->`
	`16`	`+ <h2>localStorage</h2>`
	`17`	`+ <button onclick="DisplayTwo()">view</button>`
	`18`	`+ <p id="textTwo"></p>`
	`19`	`+ <script src="script.js"></script>`
	`20`	`+ <!-- Example Two for sessionStorage() -->`
	`21`	`+ <h2>sessionStorage</h2>`
	`22`	`+ <button onclick="DisplayThree()">view</button>`
	`23`	`+ <p id="textThree"></p>`
	`24`	`+</body>`
	`25`	`+`
	`26`	`+</html>`

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+/* Storage API are used for storing data files`
	`2`	`+ There are two main types of storing data in web page`
	`3`	`+ 1. localStorage() --> used for storing data permenantly`
	`4`	`+ 2. sessionStorage() --> used for storing data for short period of time`
	`5`	`+*/`
	`6`	`+let textOne = document.getElementById('textOne');`
	`7`	`+`
	`8`	`+function DisplayOne() {`
	`9`	+ textOne.innerHTML = `
	`10`	`+ <h2>Storage API are of Two Types</h2>`
	`11`	`+ <h3>1. localStorage: ()</h3>`
	`12`	`+ <p>Used for Storing Data Permanently</p>`
	`13`	`+ <h3>2. sessionStorage()</h3>`
	`14`	`+ <p>Used for Storing Data Short Time</p>`
	`15`	+ `
	`16`	`+}`
	`17`	`+`
	`18`	`+// Example One localStorage()`
	`19`	`+`
	`20`	`+let textTwo = document.getElementById('textTwo');`
	`21`	`+`
	`22`	`+function DisplayTwo() {`
	`23`	`+ localStorage.setItem("name", "Azhar");`
	`24`	`+ textTwo.innerHTML = localStorage.getItem("name");`
	`25`	`+}`
	`26`	`+`
	`27`	`+// Example Two sessionStorage()`
	`28`	`+`
	`29`	`+let textThree = document.getElementById('textThree');`
	`30`	`+`
	`31`	`+function DisplayThree() {`
	`32`	`+ sessionStorage.setItem("name", "Musharraf");`
	`33`	`+ textThree.innerHTML = sessionStorage.getItem("name");`
	`34`	`+}`

Comments

(0)