认识Storage
◼ WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：cookie:服务器返回自动返回一个cooki,浏览器将cookie存储到本地,浏览器再发送请求自动把cooki传递过去localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；
Storage的基本操作
// 获取token
//第一次获取token 不一定是有值的
let token = localStorage.getItem("token")
//如果没有值就向服务器发送请求
if(!token){console.log("从服务器获取token")token = "webkingtokeninfo"localStorage.setItem("token",token)
}
//第一次获取username和password也不一定是保留的
let username = localStorage.getItem("username")
let password = localStorage.getItem("password")
// 如果没保留就让用户输入
if(!username||!password){console.log("让用户输入账号和密码")username = "hahahah"password = "hahahah"localStorage.setItem("username",username)
localStorage.setItem("password",password)
}
localStorage和sessionStorage的区别
◼ 我们会发现localStorage和sessionStorage看起来非常的相似。
◼ 那么它们有什么区别呢？验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；案例:// 验证一:关闭网页// //1.localStorage的存储--会保留// localStorage.setItem("name","localStorage")// //2.sessionStorage的存储--会消失// sessionStorage.setItem("name","sessionStorage")// 验证二:打开新的网页再网页内// const btnEl = document.querySelector(".btn")// btnEl.onclick = function(){// window.open("./static/about.html","_self")// }// //1.localStorage的存储--会保留// localStorage.setItem("info","localStorage-1111")// //2.sessionStorage的存储--会保留// sessionStorage.setItem("info","sessionStorage1111")// 验证三:打开新的页面再网页外const btnEl = document.querySelector(".btn")btnEl.onclick = function(){window.open("./static/about.html","_blank")}//1.localStorage的存储--会保留localStorage.setItem("info","localStorage-页面外")//2.sessionStorage的存储--会保留sessionStorage.setItem("info","sessionStorage-页面外")
Storage常见的方法和属性
◼ Storage有如下的属性和方法：◼ 属性：Storage.length：只读属性✓ 返回一个整数，表示存储在Storage对象中的数据项数量；◼ 方法：Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称；Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。✓ 如果key存储，则更新其对应的值；Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；Storage.clear()：该方法的作用是清空存储中的所有key；演示:console.log(localStorage.length)//常见的方法// 如果有两个字符串再两个地方出现,可以存储到一个常量里,避免出错const access_token = "token"// setItem/getItem 获取和设置localStorage.setItem(access_token,"webkingtoken")console.log(localStorage.getItem(access_token))//其他方法console.log(localStorage.key(1))console.log(localStorage.key(0))console.log(localStorage.removeItem("info"))localStorage.clear()
Storage-Cache工具的封装
## 封装文件// 可以解决Storage不能传入对象的问题//缓存class Cache{constructor(isLocal=true){this.storage = isLocal?localStorage:sessionStorage}setCache(key,value){if(!value){throw new Error("value没有值")}this.storage.setItem(key,JSON.stringify(value))}getCache(key){const result = this.storage.getItem(key)if(result){return JSON.parse(result)}}removeCache(key){this.storage.removeItem(key)}clear(){this.storage.clear()}}const localCache = new Cache()const sessionCache = new Cache(false)localCache.setCache("number",111)//storage 本身不能存储对象类型的const userinfo = {name:"hdc",nickname:"webKing",level : 100,imgURL:"http:www.baidu.com"}console.log(localCache.setCache("userinfo",userinfo))console.log(localCache.getCache("userinfo"))
