Small case:
In this case of the login registration page, we did not connect to the database but used the knowledge point of local storage to complete it. Let's see what the local storage is:
local storage feature
- Data is stored in the user's browser
- Easy to set, read, even page refresh without losing data
- Large capacity, sessionStorage is about 5M, localStorage is about 20M.
- Only strings can be stored, and objects can be stored after encoding JSON.stringify()
window.sessionStorage
Features
- The lifecycle is closing the browser window
- Data can be shared in the same window (page)
- Stored in the form of key-value pairs
use
Storing data:
sessionStorage.setItem(key,value)
retrieve data:
sessionStorage.getItem(key)
delete data:
sessionStorage.removeItem(key)
Delete all data:
sessionStorage.clear()
Click this button in the browser and click Application to see the data we store.
It is stored under Storage. The data stored in sessionStorage and localStorage are separate.
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
console.log(localStorage.getItem('username'));
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值存储起来
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
});
get.addEventListener('click', function() {
// 当我们点击了之后，就可以把表单里面的值获取过来
console.log(sessionStorage.getItem('uname'));
});
remove.addEventListener('click', function() {
//
sessionStorage.removeItem('uname');
});
del.addEventListener('click', function() {
// 当我们点击了之后，清除所有的
sessionStorage.clear();
});
</script>
</body>
</html>
But after we click the first button to store data, the data we entered ' wwww ' will be stored in the variable val, and then stored in the browser in the form of key-value pairs, we can see the storage in the Application on the right key-value pair
window.IocalStorage
Features
- The life cycle is permanent, and the closing page will also exist unless it is manually deleted
- Multiple windows (pages) can be shared (the same browser can be shared)
- Stored in the form of key-value pairs
use
Storing data:
localStoragesetItem(key,value)
retrieve data:
localStorage.getItem(key)
delete data:
localStorage.removeItem(key)
Delete all data:
localStorage.clear()
The application method of IocalStorage is the same as that of sessionStorage, except that the life cycle of IocalStorage takes effect permanently. Even if the browser is closed, the data will still be there next time you open it. This is its most prominent feature.
Comprehensive case
There is such a login and registration page. We need to save the registration data like the beginning of the article, and then determine whether the username and password entered on the login page correspond to the locally stored data. How to apply the local storage knowledge points just learned to complete this case?
Ideas:
We can declare an array, store the username entered in the registration page in the array, and store the username and password of the registration page in the browser through local storage. Then go back to the login page, first determine whether the entered username is in the username array, and if so, find the password corresponding to the username in the locally stored data, if the password is the same as the password we entered on the login page, successfully logged in