40、讲解本地存储的概念和使用方法，包括cookie、localStorage、sessionStorage等

第40课 本地存储

在前面的课程中，我们已经学习了HTML、CSS和JavaScript的基础知识，以及如何在浏览器中操作DOM、事件、AJAX等技术，但是在实际应用中，我们可能需要保存一些数据，以便下次访问时能够自动加载之前的状态，这就需要用到本地存储技术。

什么是本地存储？

本地存储指的是在浏览器中保存数据的技术，它可以把数据存储在用户的计算机上，可以是永久性的，也可以是临时性的，这样就可以在下一次访问同一页面时自动加载之前保存的数据，而无需重新输入或操作。

本地存储包括以下几种：cookie、localStorage、sessionStorage。它们都可以用JavaScript进行操作，但是各自的作用和使用方法略有不同。

1、cookie

cookie是一种比较古老的本地存储技术，它是在HTTP协议中定义的一种用于保存数据的机制，它将数据存储在客户端的浏览器中，与服务器通信时会自动携带上这些数据。cookie可以设置过期时间，超过过期时间后会自动删除。

cookie的使用方法如下：

//写cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
//读cookie
var x = document.cookie;

2、localStorage

localStorage是HTML5中新增的一种本地存储技术，用于长期保存数据，即使关闭浏览器或重启计算机，数据仍然存在。它可以存储大量数据，但是仅限于同源文档之间共享。

localStorage的使用方法如下：

//写localStorage
localStorage.setItem("key", "value");
//读localStorage
var x = localStorage.getItem("key");
//删除localStorage
localStorage.removeItem("key");

3、sessionStorage

sessionStorage也是HTML5中新增的一种本地存储技术，用于短期保存数据，只要页面没有关闭，数据就一直存在，但是一旦关闭了浏览器窗口，数据就会被删除。它可以存储大量数据，但也仅限于同源文档之间共享。

sessionStorage的使用方法与localStorage类似：

//写sessionStorage
sessionStorage.setItem("key", "value");
//读sessionStorage
var x = sessionStorage.getItem("key");
//删除sessionStorage
sessionStorage.removeItem("key");

需要注意的是，cookie、localStorage和sessionStorage所能存储的数据大小都有限制，可以根据不同的需要选择合适的本地存储技术，并在使用时注意其限制。另外，由于不同浏览器之间本地存储技术的实现方式可能略有不同，因此在应用时需要进行兼容性测试。

本地存储技术可以为我们提供很大的便利，让我们能够更加高效地管理和保存数据，应用到各种实际场景中，比如记住用户的登录状态、保存用户的设置信息等。