Introduction to local storage
- In HTML5, a new localStorage feature has been added, which is mainly used as local storage.
- A web application can store data locally in the user's browser
- Solved the problem of insufficient cookie storage space (cookie storage space is 4K)
- The general browser in localStorage supports 5M size, which is equivalent to a 5M size database for front-end pages
- HTML5 local storage is better than cookie s
Local storage provides two objects for storing data on the client side
- localStorage: Permanent storage: Stores data with no expiration date; no matter which page is opened from, the data in permanent local storage is
- sessionStorage: Temporary storage: When the page is closed, the data temporarily stored locally will be deleted; the temporary local storage is only valid for the current page, and the temporary local storage created by other pages cannot be obtained; jump from creating a temporary local storage page to other pages, temporary The data stored locally will be transferred to the redirected page; temporary local storage is mostly used to transfer values between pages
Create and get local storage
Method 1: Use methods to create and obtain
-
Creation syntax: object.setItem("storage name", "value");
-
Get syntax: object.getItem("storage name");
-
Note: Storage names and values are always strings
<script>
// Method 1: Use methods to create and obtain
// Creation syntax: object.setItem("storage name", "value");
// Note: Storage names and values are always strings
sessionStorage.setItem("uname", "bitter");
// Get syntax: object.getItem("storage name");
var uname = sessionStorage.getItem("uname");
alert(uname);
</script>
Method 2: Use properties to create and get
- Create Syntax: object.storename = "value";
- Get syntax: object.storage_name
<script>
// Method 2: Use properties to create and get
// Creation syntax: object.storagename = "value";
localStorage.uname = "bitter";
// Get syntax: object.storage_name
var uname = localStorage.uname;
alert(uname);
</script>
Create and get multiple local stores
-
JSON.stringify(): Convert object to JSON string
-
JSON.parse(): Convert JSON string to object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// -------------Create and get multiple local storages-------------
// 1. The first step: convert the object into a JSON string to create local storage
// JSON.stringify(): Convert to JSON string, usually object or array
localStorage.ren = JSON.stringify({uname : "bitter", age : 18, sex : "male"});
// 2. Step 2: Convert the obtained local storage (JSON string) into an object
// JSON.parse(): Convert JSON string to object
var info = JSON.parse(localStorage.ren);
// console.log(info);
alert(info.uname);
</script>
</body>
</html>
Modify and delete local storage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">Revise</button>
<button id="btn2">delete data</button>
<button id="btn3">delete local storage</button>
<button id="btn4">delete all local storage</button>
<script>
// -------------Modify and delete local storage (temporary and permanent operations are the same)-------------
// 1. Create temporary local storage
sessionStorage.ks = "bitter";
sessionStorage.nl = "18 age";
// 2. Modify the locally stored data
document.getElementById("btn1").onclick = function(){
sessionStorage.nl = "20 age";
}
// 3. Delete the locally stored data, the stored name will be retained
document.getElementById("btn2").onclick = function(){
sessionStorage.ks = null;
}
// 4. Delete locally stored data, the stored name will not be retained
document.getElementById("btn3").onclick = function(){
sessionStorage.removeItem("nl");
}
// 5. Delete all locally stored data, the stored name will not be retained
document.getElementById("btn4").onclick = function(){
sessionStorage.clear();
}
</script>
</body>
</html>
Temporary local storage page by value
Jump from creating a temporary local storage page to another page, and the temporary local storage data will be transferred to the jumped page
Temporary local storage is mostly used to pass values between pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<a href="./test.html">Jump to 2 pages</a>
<button id="btn1">Jump to 2 pages</button>
<script>
document.getElementById("btn1").onclick = function(){
window.location.href = "./test.html";
}
// -------------Temporary local storage page pass value-------------
// 1. Create temporary local storage
sessionStorage.ks = "bitter";
sessionStorage.nl = "18 age";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<button id="btn1">Obtain</button>
<script>
// -------------Temporary local storage page pass value-------------
document.getElementById("btn1").onclick = function(){
alert(sessionStorage.nl);
}
</script>
</body>
</html>
local storage exercise
Add a shopping cart, identify whether the user is logged in, and the expiration time of the user's login information
1.html,2.html,3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1 Product No.</title>
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
div{
margin-top: 50px; text-align: center;
}
</style>
</head>
<body>
<div id="user"></div>
<div>I am item 1</div>
<div>
<button id="cart">add to Shopping Cart</button>
</div>
<script>
$(function(){
// Get the current time and save it
var nTime = parseInt(new Date().getTime()/1000);
var t = nTime-localStorage.userTime;
// Determine if the browser has user information
if(t < 60 && localStorage.user){
// Get user information
var user = JSON.parse(localStorage.user);
// Write user information to the page
$("#user").text("Welcome: " + user.un + ", your ID: " + user.id);
}else{
localStorage.user = null;
}
$("#cart").click(function(){
// Verify that you are logged in
if(user){
alert("Execute add to cart code");
}else{
// Save current URL: 1.html
sessionStorage.prev = window.location.href;
// Jump from the current page to the login page
window.location.href = "./login.html";
}
})
})
</script>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>log in page</title>
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
div{
margin-top: 50px; text-align: center;
}
</style>
</head>
<body>
<div>I am the login page</div>
<div>
username:<input type="text" id="uname" placeholder="please enter user name">
<br><br>
password:<input type="password" id="pwd">
<br><br>
<input type="submit" id="sbt" value="submit">
</div>
<script>
$(function(){
$("#sbt").click(function(){
// 1. Obtain username and password
var uname = $("#uname").val();
var pwd = $("#pwd").val();
// 2. Server verification
if(uname == "Little new" && pwd == "123456"){
// Validate code executed by
// save user information
localStorage.user = JSON.stringify({un:"Little new", "id":001});
// Get the login time and save it
localStorage.userTime = parseInt(new Date().getTime()/1000);
// Jump back to the original URL
window.location.href = sessionStorage.prev;
}else{
alert("Incorrect username or password");
}
})
})
</script>
</body>
</html>