大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
一.客户端缓存:localStorage/sessionStorage
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
sessionStorage-本地存储一个会话(session)中的数据,当页面关闭,数据将清除.存储大小约为5M.
二.localStorage(sessionStorage)基本用法
1.设置
setItem(key,value)
localStorage.setItem('a','123');
2.1获取
getItem(key);
localStorage.getItem('a'); //返回123
2.2遍历获取
var storage=window.localStorage;
storage.a1=1;
storage.setItem("a2",2);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
3.删除
removeItem(key);
localStorage.removeItem('a'); //删除指定缓存
localStorage.clear(); //清空所有本地缓存
注意:
①localStroage返回的所有数据都是字符串.当缓存的数据为json时,需要用以下方法转换:
JSON.stringify()用于从一个对象解析出字符串;
JSON.parse()用于从一个字符串中解析出json对象。
var jsonData = {
'name': '小红', 'age': 18}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 18
②sessionStorage用法与localStroage一样,只不过它们的作用域不一样;sessionStorage是会话级别的存储,关闭页面,数据将被清除.
三.项目应用
1.将用户登入信息存入sessionStorage
......
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
//登入成功后,缓存用户登入信息
sessionStorage.setItem('username', value) //将用户名缓存
var time = new Date().toLocaleDateString() + new Date().toLocaleTimeString()
sessionStorage.setItem('t', time) //将登入时间缓存
callback()
}
}
......
2.获取用户登入信息
......
handleGetUser() {
var uname = sessionStorage.getItem('username')
var time = sessionStorage.getItem('t')
alert('登入用户名为:' + uname + ' ' + '登入时间为:' + time)
},
......
3.清除缓存
...... handleClear() { localStorage.clear() //清除所有本地缓存 sessionStorage.clear() //清除当前会话所有缓存 sessionStorage.removeItem('username') //清除指定缓存 alert('清除成功') }, ......
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/179067.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...