![[JavaScript] 本地存储(sessionStorage与localStorage)](https://sm.tqys.net/uploadfile/img/2023/03/21/50499168093d878afb30b4551f762155.jpg)
小案例：
在这个登录注册页面案例里，我们并没有连接数据库而是用到了本地存储这个知识点完成的，我们看看本地存储究竟是什么：
本地存储特性
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大, sessionStorage约5M、localStorage约20M .只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage
特点
生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用使用
存储数据：
sessionStorage.setItem(key,value)
获取数据：
sessionStorage.getItem(key)
删除数据：
sessionStorage.removeItem(key)
删除所有数据：
sessionStorage.clear()
在浏览器里点击这个按钮点Application就能看到我们存储的数据
就存储在Storage下，sessionStorage与localStorage存储的数据是分开的
例子
<!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>
但我们单击第一个存储数据的按钮后，我们输入的数据‘ wwww '会被存储在变量 val 里，然后通过键值对的形式存储到浏览器里，我们可以在右边的Application看到存储的键值对
window.IocalStorage
特点
生命周期永久生效,除非手动删除否则关闭页面也会存在可以多窗口(页面)共享(同一浏览器可以共享)以键值对的形式存储使用使用
存储数据：
localStoragesetItem(key,value)
获取数据：
localStorage.getItem(key)
删除数据：
localStorage.removeItem(key)
删除所有数据：
localStorage.clear()
IocalStorage的应用方式和sessionStorage一样只不过IocalStorage生命周期永久生效就算把浏览器关掉了，下次打开数据还会在，这就是它最突出的特点
综合案例
有一个这样的登录注册页面，我们要实现像文章开头那样，可以保存注册的数据，然后判断登陆页面输入的用户名与密码和本地存储的数据是否一一对应。这个案例怎么应用刚刚学到的本地存储知识点完成呢？
思路：
我们可以声明一个数组，把在注册页面中输入的用户名都存储在数组里，让注册页面的用户名和密码通过本地存储存储在浏览器中。然后回到登陆页面，先判断输入的用户名是否在用户名数组里，如果是的话再在本地存储的数据中找到该用户名对应的密码，如果这个密码和我们在登陆页面输入的密码相同，就登陆成功了
如果觉得《[JavaScript] 本地存储(sessionStorage与localStorage)》对你有帮助，请点赞、收藏，并留下你的观点哦！
