核心代码
mydata = JSON.parse(localStorage.data); // 读取
localStorage.data = JSON.stringify(mydata); // 存入
代码说明
var mydata=[]
// 读取浏览器中,名为data的数据,并将其存入数组mydata中
// 但如果浏览器中没有名为data的数据,就不能读取,会报错
// 所以可以先判断localStorage.data是否为空,再进行读取(如案例中)
mydata = JSON.parse(localStorage.data)
// 将mydata中的数据,存入浏览器名为data的地方之中
// 若浏览器中没有名为data的地方,则先创建一个名为data的地方,再把数据存入
localStorage.data = JSON.stringify(mydata)
localStorage就跟一个变量一样
在“=”左边可以对其进行写入操作
在“=”右边可以对其进行读取操作
其中
localStorage:存储或读取数据
JSON.parse():将字符串转化为数组或JSON
JSON.stringify():将数组或JSON转化为字符串
注:
根据我查的资料显示,每一个网页在浏览器中存储的空间是互相隔离的。
(即这个页面无法引用那个页面存在浏览器中的数据)
但根据我实际的操作,有时是可以成功引用别的页面村的数据,有时又不可以。
补充说明
(1)
localStorage可将数据存储到本地(浏览器)当中
当页面刷新,localStorage保存在浏览器中的数据仍会保留
从而实现了:页面刷新但数据不丢失
(2)
浏览器中查看localStorage存储的数据的方法
查看之后可直接鼠标右键,对密钥和值进行编辑或删除。
示例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
测试数据存储<input type="text" class="input">
<button class="buttonSave">保存</button>
<button class="buttonRead">读取</button>
<button class="buttonClear">清空数据</button>
<div class="results"></div>
<script>
// 获取输入框的值
var input = document.getElementsByClassName("input")[0]
//获取三个按钮
var buttonSave = document.getElementsByClassName("buttonSave")[0]
var buttonRead = document.getElementsByClassName("buttonRead")[0]
var buttonClear = document.getElementsByClassName("buttonClear")[0]
//获取div,用来显示读取的结果
var results = document.getElementsByClassName("results")[0]
// 定义一个数组,用来存储从浏览器中读取到的数据
var mydata=[]
// 点击保存按钮
buttonSave.onclick = function(){
// localStorage.data:获取浏览器中名为data的数据,得到的数据类型为字符串
// JSON.parse();将获取到的字符串转化为数组或JSON
if (localStorage.data != null){
// 如果localStorage.data不是空的,就把值传给数组mydata
// 若localStorage.data为空,就把值传给数组mydata就会报错,程序无法正常运行
mydata = JSON.parse(localStorage.data);
}
// 将输入框的值存入mydata中
mydata.push(input.value);
// JSON.stringify();将获取到的数组或JSON转化为字符串(因为localStorage只能存储字符串)
localStorage.data = JSON.stringify(mydata)
// 每次保存后,清空输入框,并把焦点回到输入框
input.value = ''; // 清空输入框
input.focus(); // 输入框获得鼠标焦点
}
// 点击读取按钮
buttonRead.onclick = function(){
results.innerHTML = `存储的数据为:${localStorage.data}`
}
// 点击清空数据按钮
buttonClear.onclick = function(){
// localStorage.clear();清除localStorage中所有的数据
localStorage.clear();
}
</script>
</body>
</html>
示例说明:
输入数据,点击保存,即可将输入的数据存入浏览器之中
点击读取,即可查看存入浏览器中的数据
点击清空数据,即可将浏览器中的所有数据清除。
应用场景
不通过后端和数据库,可直接在浏览器中存储一些数据。