JavaScript本地储存:localStorage、sessionStorage、cookie的使用

什么是本地储存？

在网站开发中，需要将一些数据临时储存起来。本地储存技术就是把数据储存在客户端浏览器中，这样就可以避免跨页面、跨域、跨浏览器的问题，提高网站的性能和用户体验。本地储存技术通常包括localStorage、sessionStorage和Cookies。

localStorage

localStorage是HTML5 Web Storage API中的一种，是一个基于键值对的储存系统，可以使Web应用程序在客户端持久保存数据，即使应用程序被关闭也不会丢失数据。localStorage保存的数据是永久性的，直至用户手动删除。使用localStorage，我们可以把数据储存在客户端浏览器中，每个域名都有自己的localStorage对象。储存数据的大小限制为5MB左右，一旦达到这个储存限制，可能导致数据丢失。

示例1：使用localStorage储存数据

localStorage.setItem("name", "Tom");
localStorage.setItem("age", "18");

示例2：使用localStorage获取数据

var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
console.log(name, age);   // Tom, 18

sessionStorage

sessionStorage也是HTML5 Web Storage API中的一项，与localStorage类似，但不同的是，sessionStorage保存的数据是临时性的，仅在关闭当前窗口时才会清除。使用sessionStorage，我们可以将数据储存在客户端浏览器中，仅在用户关闭当前浏览器窗口后，数据才会被清除。每个窗口或标签页都拥有它们自己的sessionStorage对象，储存数据的大小与localStorage相同，不过数据是临时性的。

示例1：使用sessionStorage储存数据

sessionStorage.setItem("name", "Jerry");
sessionStorage.setItem("age", "20");

示例2：使用sessionStorage获取数据

var name = sessionStorage.getItem("name");
var age = sessionStorage.getItem("age");
console.log(name, age);   // Jerry, 20

Cookie

Cookie是一种小型文本文件，储存在客户端计算机上。Cookie是一个中间介质，用来记录用户的一些信息。网站会把用户的数据写入到客户端计算机，下次用户访问该网站时，服务器可读取这些数据，从而实现用户的个性化服务。Cookie的储存大小一般是4KB左右。

示例1：使用Cookie储存数据

document.cookie="name=Lucas; path=/";
document.cookie="age=22; path=/";

示例2：使用Cookie获取数据

var x = document.cookie;
console.log(x);   // name=Lucas; age=22

以上是本地储存技术的完整攻略，可以根据实际需求选择适当的储存方式，提高网站的性能和用户体验。

阅读剩余 26%