随着互连网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据。对此,HTML 规范提出了相关解决方案。
本文为博主学习时所记笔记,参考:黑马 pink 老师前端入门;HTML 本地存储
一、本地存储特性
- 数据存储在用户浏览器中
- 设置、读取方便,甚至刷新页面不丢失数据
- 容量较大,
sessionStorage
约 5 M,localStorage
约 20 M - 只能存储字符串,可以将对象
JSON.stringify()
编码后存储
HTML 本地存储提供了两个在客户端存储数据的对象:
window.sessionStorage
: 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
window.localStorage
: 里面存储的数据没有过期时间设置
下面分别介绍以上两种方法。
二、window.sessionStorage
- 几点说明
- 生命周期为关闭浏览器窗口为止
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 存储数据
sessionStorage.setItem(key,value)
例如,点击按钮存储表单数据:
set.addEventListener('click', function () {
var val = ipt.value;
sessionStorage.setItem('uname', val);
})
效果展示和查看存储数据的步骤:
当然你也可以同时存储多个数据,无非就是设置多个 key 的问题。如下:
set.addEventListener('click', function () {
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('password', val);
sessionStorage.setItem('email', val);
})
- 获取数据
sessionStorage.getItem(key)
例如,点击获取按钮打印上述存储数据:
get.addEventListener('click', function () {
var uname = sessionStorage.getItem('uname');
console.log(uname);
})
- 删除指定数据
sessionStorage.removeItem(key)
例如,点击删除按钮将存储的数据删除:
remove.addEventListener('click', function () {
sessionStorage.removeItem('uname');
})
- 删除所有数据
sessionStorage.clear()
例如,点击清空所有数据按钮,可以将当前页面存储的数据都删除。(慎用)
del.addEventListener('click', function () {
sessionStorage.clear();
})
三、window.localStorage
- 几点说明
- 此方法存储的数据,生命周期永久生效。除非手动删除,否则即使关闭页面数据也会存在。
- 可以多窗口(页面)共享,同一浏览器可以共享数据。
- 以键值对形式存储。
- 存储数据
localStorage.setItem(key,value)
与上述方法不同,查看数据应该到 Application —— Storage —— Local Storage 中
- 获取数据
localStorage.getItem(key)
- 删除指定数据
localStorage.removeItem(key)
- 删除所有数据
localStorage.clear()
具体存储获取删除操作与上面方法相同,不过需要注意:如果没有手动点击删除数据,即使关闭了浏览器页面,重新打开时依然有之前的数据存储。
还有一点说明:在保证同一浏览器的情况下,即使打开另一个页面,也可以操作前存储的数据的。
四、案例:记住用户名
这个案例其实挺简单,简单说一下原理。如果我们勾选了记住用户名,那么输入的用户名数据将会被本地存储,下次打开此页面时表单中会直接显示此前存储的数据。否则,如果没有勾选,则会删除此前存储的用户名数据。
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function () {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>
五、案例:todolist
此案例是利用 jQuery 写的。
主要是用到本地存储 localStorage
,无论是按下回车还是点击复选框,都要先将数据存储然后将本地存储的数据加载到页面,保证即使关闭页面数据也不会丢失。
采用数组的形式进行存储,如下代码为两条信息的存储示例
var todolist = [{
title: '明天一定要早起!', // 事项
done: true // 是否完成
}, {
title: '晚上不能熬夜了!',
done: false
}]
注意:
- 本地存储 localStorage 里面只能存储字符串格式数据,因此需要将对象转换为字符串,利用
JSON.stringify(data)
。 - 获得本地存储的数据,需要把字符串数据转换为对象格式,利用
JSON.parse(data)
JS 代码
$(function () {
// 打开页面时就要进行数据渲染
load();
// 1. 添加待办事项
$("#title").on("keydown", function (event) {
if (event.keyCode === 13 && $(this).val()) {
var local = getData();
// 将最新数据追加给数组
local.push({ title: $(this).val(), done: false });
// 将此数组存储下来
saveDate(local);
// 将本地存储数据渲染至页面
load(local);
$(this).blur().val("");
}
})
// 2. 删除待办事项
$("ol, ul").on("click", "a", function () {
var data = getData();
// 获取 a 标签,自定义索引
var index = $(this).attr("data-id");
// 删除对应元素数据
data.splice(index, 1);
// 保存数据到本地存储
saveDate(data);
// 重新渲染
load();
})
// 3. 点击完成按钮
$("ol, ul").on("click", "input", function () {
// 获取本地数据
var data = getData();
// 利用 a 标签的自定义属性获取索引
var index = $(this).siblings("a").attr("data-id");
// 找到当前复选框,修改 done 属性
data[index].done = $(this).prop("checked");
// 保存数据
saveDate(data);
// 重新渲染
load();
})
// 封装函数:读取本地存储的数据
function getData() {
var data = localStorage.getItem("todolist");
if (data !== null) {
return JSON.parse(data); // 返回对象格式
} else {
return [];
}
}
// 封装函数:保存本地存储数据
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
// 封装函数:数据渲染
function load() {
var data = getData();
// 渲染前将元素内容清除,再用 each 遍历
$("ol, ul").empty();
// 声明变量记录个数
var todoCount = 0;
var doneCount = 0;
$.each(data, function (i, ele) {
if (ele.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + ele.title + "</p> <a href='javascript:;' data-id=" + i + " ></a ></li > ");
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' data-id=" + i + " ></a ></li > ");
todoCount++;
}
});
// 修改事项个数
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
})