jq 如何获取和当然元素相同类名的标签_JS/JQ基于localStorage的本地数据储存指南...

网上单独讲解localStorage的内容很多，但是成套运作的比较少，本篇文章作为学习记录也给与我同样非专业出身的自学者们一条快速通道。

文章将分为以下几个部分：

逻辑结构
基础讲解
创建一个完整的操作链

逻辑结构

由图可见，非常的朴实无华呢（）

用户访问 → JS/JQ判断是否存在localStorage数据

→ 存在 →读取 → 数据序列还原 → 应用到当前页面

→ 不存在 →结束

编辑内容 → JS/JQ 识别主动/被动储存操作

→ 获取存储目标对象 → 数据序列化处理 → 存储localStorage数据

实例文件下载可以去github ：https://github.com/kumame/Tools/tree/main/fsnm
我之前写的论坛风格小说编辑器，主要运行代码都在app.js里面，写的还挺规整的可读性应该没问题。

基础知识

localStorage的本地数据储存基于相同域名，也就是说不管你有多少单独页面，只要域名是同一个那么所有数据都会储存在这个名下，因此多数据页面时需要注意存储的命名规范。

实际上语言上我更推荐JQ，主要是简洁明了减少了很多操作。当然，不论是JS还是JQ在执行逻辑上是一样的。

localStorage储存的时候需要两个数据：键(key) 和值(value)，简单理解就是标题和内容。在读取时根据键(key) 获得对应的值(value) 返回给页面。

因此是否存在对应数据依靠的是查找键(key) ，数据量较少的情况下实际上使用if(localStorage.key)就可以快速判断了，较多的时候可以使用localStorage.hasOwnProperty(‘key’)进行数组筛选，后者会返回布尔值也就是true/false。

在使用localStorage数据时，值(value)会作为字符串直接使用，因此如果你是多数据数组的话使用的时候得进行一次拆分操作。

用JQ来示范给input填充单一保存信息：$("#id").val(localStorage.key);

创建存储数据也非常的简单，localStorage.key=目标数据，这里的localStorage.key就和var赋值是一样的。

清除localStorage数据有两个方式：

清除域名下的所有数据localStorage.clear()
清除指定键(key)的数据localStorage.removeItem("key")

创建一个完整的操作链

1、确定你需要储存的有些哪些数据，并进行ID规范命名以便之后获取。

2、设置触发储存function函数：

函数中获取你需要的所有数据并设置key名储存；

数量较少的情况可以分别储存单独的key；

数据量较多的时候可以创建一个数组 new Array() 将所有数据对应数组序号。

若获取的数据中有多选(checkbox)的情况，可以使用.each(function())直接输出数组。或者先使用for获取循环，判定.checked状态的数据输出，并在输出结果的时候加上分割符号，再使用. replace()替换掉多余的分隔符号避免空数据。该部分储存的数据最好为获取对象的ID方便之后恢复时候定位。

3、设置自动保存function函数，触发的是2储存函数；

4、如果有键盘快捷键储存的需求，触发的也是2储存函数；

5、鉴于操作反馈，可以添加一个不影响连续操作的保存提示；

6、设置套用数据function函数：

单一数据可以直接套用，多数据作为数组储存的情况下先还原数组 var list = localStorage.key.split(",")，按照储存时候的序列顺序对应套用即可。

数组连环套的情况下可以直接用for循环拆解并输出。

7、设置读取数据的function函数：

可以使用html标签 οnlοad=“读取函数()”，也可以使用别的加载方法，哪个方便用哪个便可。

读取数据可以设置为：主动 - 打开页面即刻获取并填充；手动 – 获取后出现提示操作让使用者选择是否填充。

8、依需求设置是否允许使用者主动清理缓存。

代码意思意思一下的演示：

//读取数据
function load(){if(localStorage.key) $("#ID").css("display","block");//激活隐藏的手动触发提示if(localStorage.key) $("#ID") $("#ID").val(window.localStorage.ke);//识别后自动填充
}//使用数据 – 基于手动操作或是处理量较多的数据
$("#insert").click(function(){重组数据后并应用的一些里操作
});//清理数据
$("# clear").click(function(){window.localStorage.removeItem("key"); //针对单一数据清理localStorage.clear(); //清理所有，同站点多页面数据时慎用
});//储存数据
JQ("#save").click(function(){获取并处理需要储存的数据Var detail = ‘’;//赋值主要用于数组，单一可以直接执行下面的 = 获取命令；localStorage.key = detail;
$("#tip").text('数据缓存于 '+new Date().toLocaleTimeString('en-US',{hour12:false}));//保存后于特定区域提示
});//自动保存
var autosave = window.setInterval(function(){$('#save').click()},60000 );
这里的数字为毫秒计算，因此是60秒。//键盘监听 Ctrl+S
function keyDown(e){currKey = e.keyCode||e.which||e.charCode;if(currKey == 83 && (e.ctrlKey||e.metaKey)){$('#save').click();return false;}
}
document.onkeydown = keyDown;