❤️localStorage缓存
localStorage缓存
localStorage是Web Storage API的一部分，它提供了一种在浏览器中存储键值对的方法。与cookies不同，localStorage的数据没有过期时间，而且在不同的浏览器窗口和标签页之间是隔离的。
以下是一些基本的localStorage用法：
- 设置值
localStorage.setItem('key', 'value');
- 获取值
let value = localStorage.getItem('key');
- 删除单个键
localStorage.removeItem('key');
- 清除所有键
localStorage.clear();
- 遍历所有键值对
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(`${key}: ${value}`);
}
注意：localStorage中存储的数据都是字符串。如果你想存储其他类型的数据，如对象或数组，你需要先将它们转换为字符串（例如，使用JSON.stringify），然后再存储。在读取时，再将字符串转换回原来的类型（例如，使用JSON.parse）。
例子
// 缓存中数据赋值
if (localStorage.zzkccbtqjwyj != null && localStorage.zzkccbtqjwyj != '') {
var str = localStorage.zzkccbtqjwyj.split("&");
$.each(str,
function(i, n) {
var str1 = n.split("=");
if ($("input[name=\"" + str1[0] + "\"]")[0]) {
if (str1[0].startsWith("RESULT")) {
var val = str1[1];
if (val == 1) { // 不同意
$($("input[name=\"" + str1[0] + "\"]")[1]).attr("checked", true);
// 不同意checked
} else { // 同意
$($("input[name=\"" + str1[0] + "\"]")[0]).attr("checked", true); // 同意
}
}
if ($("input[name=\"" + str1[0] + "\"]").val() == null || $("input[name=\"" + str1[0] + "\"]").val() == "") {
$("input[name=\"" + str1[0] + "\"]").val(str1[1]);
}
} else if ($("textarea[name=\"" + str1[0] + "\"]")[0]) {
if ($("textarea[name=\"" + str1[0] + "\"]").val() == null || $("textarea[name=\"" + str1[0] + "\"]").val() == "") {
$("textarea[name=\"" + str1[0] + "\"]").val(str1[1]);
}
}
else if ($("select[name=\"" + str1[0] + "\"]")[0]) {
if ($("select[name=\"" + str1[0] + "\"]").val() == null || $("select[name=\"" + str1[0] + "\"]").val() == "") {
$("select[name=\"" + str1[0] + "\"]").val(str1[1]);
}
}
/================iframe缓存赋值===========/先清空之前的缓存，在保存最新的内容
var mztj = localStorage.mztj;
if (mztj != null && mztj != "") {
localStorage.mztj = null;
}
// 缓存数据
localStorage.mztj = decodeURIComponent($("form").serialize(), true);
});
}
=============jsp缓存赋值 ===
var iframeBox1_iframe = document.getElementById('iframeBox1').contentWindow;
var iframeBox1_div = iframeBox1_iframe.document.getElementById('inputForm');
// 缓存数据
localStorage.zzkccbtqjwyj = decodeURIComponent($(iframeBox1_div).serialize(), true);
localStorage的常用写法以及使用例子（使用场景：a页面跳转到b页面，但是a页面数据没提交，再从b页面返回a页面，此时a页面要回显之前未提交已经输入的数据，可以用此技术实现）
localStorage.a =1;//设置a为"1"
localStorage["a"]="test";//设置a为"test"，覆盖上面的值
localStorage.setItem("b","b");//设置b为"b"
var val1 = localStorage["a"];//获取a的值
var val2 = localStorage.a;//获取a的值
var val3 = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
代码
//1.先清空之前的缓存，在保存最新的内容
var storageData = localStorage.storageData;
if(storageData!= null && storageData !=""){
localStorage.clear();
}
// 2.缓存表单的数据
localStorage.storageData=decodeURIComponent($("form").serialize(),true);
// 3.取得缓存中的数据，并赋值给form表单控件
if(localStorage.storageData != null && localStorage.storageData != ''){
var str = localStorage.storageData.split("&");
$.each(str,function(i,n){
var str1 = n.split("=");
if($("input[name=\""+str1[0]+"\"]")[0]){
if($("input[name=\""+str1[0]+"\"]").val()== null || $("input[name=\""+str1[0]+"\"]").val() ==""){
$("input[name=\""+str1[0]+"\"]").val(str1[1]);
}
}else if($("textarea[name=\""+str1[0]+"\"]")[0]){
if($("textarea[name=\""+str1[0]+"\"]").val() == null || $("textarea[name=\""+str1[0]+"\"]").val() == ""){
$("textarea[name=\""+str1[0]+"\"]").val(str1[1]);
}
}else if($("select[name=\""+str1[0]+"\"]")[0]){
if($("select[name=\""+str1[0]+"\"]").val() == null || $("select[name=\""+str1[0]+"\"]").val() == ""){
$("select[name=\""+str1[0]+"\"]").val(str1[1]);
}
}
});
}