只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;
存储的数据将保存在浏览器会话中。
localStorage 类似 sessionStorage,但其区别在于:
存储在 localStorage 的数据可以长期保留;
而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。
cookie也用来存储数据,但是cookie不适合存储太多数据
因为cookie有个特性:每次请求后台的时候,cookie所有的数据都会发过去,但有些数据是本次请求非必要数据,没有必要传到后台
localStorage一共四个方法:
getItem(key, value): 增加一个数据项b,value只能传字符串格式的
getItem(key): 读取数据localStorage项
removeItem(key): 移除localStorage项
clear(key): 移除所有
localStorage.setItem(‘liang’, ‘shen me ya’); // 数据是永久存储的当你关闭页面重新打开,数据还在。 按域分,只能看见当前域的
一个案例(待办事项),运行效果:
See the Pen VwpRJPJ by 梁敏莹 ( @liang-duck) on CodePen. ***思路:
首先设计一下字符串该怎么存,必须可遍历=> 字符串、数组、JSON格式对象
字符串不可用,因为字符串不具备数据结构的,或者说它的数据结构非常简单,就是一些字符重头开始排列
只能通过下标开始取值,一次只能取到一个字符
所以想办法设计一下数据的结构
JSON不可用,因为JSON格式的遍历是没有顺序的,JSON格式的对象本身就是无序的,所以要保证数据顺序的时候就不能使用 JSON
数组是有序的,但不能反馈值
[
[
内容
状态
]
]
只能按照一定的顺序进行存放,所有子数组的第一条是内容,第二条是状态
数组不好做,因为必须强制地让它内容在第一个,状态在第二个,必须记住顺序
所以里面一层应该用JSON
[
{
content: "内容1",
done: false // true 完成, false 未完成
}
{
content: "内容2",
done: false
}
]
总代码:
<script>
const oIpt = document.getElementById("ipt");
const oList = document.getElementById("list");
const data = localStorage.getItem("todolist");
// 当第一次打开或者说什么都没有存的时候,用for遍历会报错,所以用if判断一下是否有内容
if (data === null)
{
// 如果没有,就创建
localStorage.setItem("todolist", "[]");
}else {
// 如果有就遍历
JSON.parse(data).forEach((v, i, self) => {
oList.innerHTML += `<li class=${v.done? "done": "do"}>${v.content}
<span>X</span></li>`
})
}
// 回车添加
oIpt.onkeyup = function (ev) {
ev = ev || window.event;
// 判断键盘的键值,不是回车就return
if(ev.keyCode !== 13) return;
// 按了回车键
const content = this.value.trim(); // trim()=>去除字符串的头尾空格:
// 没有内容什么都不干
if (!content) return;
// 不仅按了回车,还有数据
// 先取出之前的,再push进去,否则会覆盖之前的
const data = JSON.parse(localStorage.getItem("todolist"));
// 更新页面
oList.innerHTML += `<li class="do">${content}<span>X</span></li>`;
// 更新本地存储库
data.push({
content,
done: false
});
// data
localStorage.setItem("todolist", JSON.stringify(data));
// 清空数据框
this.value = "";
};
// X 的事件,事件代理
oList.addEventListener("click", e => {
const that = e.target;
const data = JSON.parse(localStorage.getItem("todolist"));
// 先组织冒泡
e.stopPropagation();
const tagName = that.tagName.toLowerCase();
switch (tagName) {
case 'span':
data.forEach(function (v, i, self){
if (this === oList.children[i])
{
oList.removeChild(this);
self.splice(i, 1)
}
}, that.parentNode/*forEach回调函数的this指向*/)
break;
case 'li':
data.forEach(function (v, i, self){
if (that === oList.children[i])
{
v.done = !v.done;
that.classList.toggle ("done");
}
})
break;
// 没有default
}
localStorage.setItem("todolist", JSON.stringify(data));
})