js学习-13（本地存储）

js学习-13（本地存储）

将web页面中的数据放到本地

本地存储的主要关键字：loncalStorage

所需解决的问题：

​ 如何存储数据？

​ 如何获取数据？

​ 如何清除数据？

localStorage

可以永久存放到本地，但是只要清除掉浏览器的缓存，即可删除数据。

1、如何存取数据：

//方法一
localStorage.newsTitle = "圣诞快乐"
//方法二
localStorage['author'] = "admin";
//方法三
localStorage.setItem("content","纯白色的月光是漫游者，白雪皑皑的松树和冷杉，纯净的雪在屋顶上闪闪发亮，只有圣诞老人醒着。")

2、如何获取数据：

//方式一
document.write("<h1>"+localStorage.newsTitle+"<h1>");
//方式二
document.write("<h2>"+localStorage['author']+"</h2>");
//方式三
document.write(localStorage.getItem("content"));
			

3、如何清除数据：

//清除1条数据
localStorage.removeItem("author");
console.log(localStorage);
			
//清除所有数据
localStorage.clear();
console.log(localStorage);

sessionStorage

本地存放的数据当次有效。在关闭页面后就会将数据清除掉。

1、如何存取数据：

//方法一
localStorage.newsTitle = "圣诞快乐"
//方法二
localStorage['author'] = "admin";
//方法三
localStorage.setItem("content","纯白色的月光是漫游者，白雪皑皑的松树和冷杉，纯净的雪在屋顶上闪闪发亮，只有圣诞老人醒着。")

2、如何获取数据：

//方式一
document.write("<h1>"+localStorage.newsTitle+"<h1>");
//方式二
document.write("<h2>"+localStorage['author']+"</h2>");
//方式三
document.write(localStorage.getItem("content"));

3、如何清除数据：

//清除1条数据
localStorage.removeItem("author");
console.log(localStorage);
			
//清除所有数据
localStorage.clear();
console.log(localStorage);

例子（todiList）

实现待办事项列表todoList，可以添加、删除待办事项，完成后可将其放至已经完成列表。

最后的实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5xeRZvH7-1595773042409)(E:\前端\学习笔记\笔记\todoList.gif)]

ist）

实现待办事项列表todoList，可以添加、删除待办事项，完成后可将其放至已经完成列表。

最后的实现效果：