极客笔记js store存储
在Web开发中，常常需要在客户端保存一些数据，以便在用户下次访问页面时可以直接使用这些数据，而不用重新从服务器获取。Javascript提供了几种不同的存储方式，例如Cookie、localStorage、sessionStorage等。本文将详细介绍这些不同的存储方式及其用法。
Cookie
Cookie是最古老的一种存储方式，它可以在客户端保存小段数据，并在每次请求时发送给服务器。Cookie有一些限制，例如大小通常被限制在4KB左右，而且每个域名下的Cookie数量也有限制。
设置Cookie
在Javascript中，我们可以通过document对象的cookie属性来设置Cookie。例如，我们可以将一个名为”username”的Cookie设置为”John”，并设置过期时间为1天：
document.cookie = "username=John; expires=" + new Date(new Date().getTime() + 24*60*60*1000).toUTCString();
读取Cookie
要读取Cookie，我们可以通过document对象的cookie属性来获取所有的Cookie，并根据需要解析其中的数据。例如，要获取名为”username”的Cookie的值：
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + '=') === 0) {
return cookie.substring(name.length + 1);
}
}
return "";
}
var username = getCookie("username");
console.log(username); // 输出"John"
删除Cookie
要删除Cookie，我们可以通过设置过期时间为过去的时间来让Cookie过期并被浏览器删除。例如，要删除名为”username”的Cookie：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
localStorage
localStorage是HTML5新增的存储方式，它可以在客户端保存大量数据，并且不会随着页面刷新或关闭而丢失。localStorage是基于键值对的存储，数据只能存储为字符串。
设置localStorage
要设置localStorage，我们可以使用localStorage对象的setItem方法。例如，我们可以将一个键为”username”，值为”John”的数据保存到localStorage中：
localStorage.setItem("username", "John");
读取localStorage
要读取localStorage，我们可以使用localStorage对象的getItem方法。例如，要获取键为”username”的数据：
var username = localStorage.getItem("username");
console.log(username); // 输出"John"
删除localStorage
要删除localStorage中的数据，我们可以使用localStorage对象的removeItem方法。例如，要删除键为”username”的数据：
localStorage.removeItem("username");
sessionStorage
sessionStorage也是HTML5新增的存储方式，它与localStorage类似，但数据在页面关闭后会被清除。sessionStorage同样是基于键值对的存储，数据只能存储为字符串。
设置sessionStorage
要设置sessionStorage，我们可以使用sessionStorage对象的setItem方法。例如，我们可以将一个键为”username”，值为”John”的数据保存到sessionStorage中：
sessionStorage.setItem("username", "John");
读取sessionStorage
要读取sessionStorage，我们可以使用sessionStorage对象的getItem方法。例如，要获取键为”username”的数据：
var username = sessionStorage.getItem("username");
console.log(username); // 输出"John"
删除sessionStorage
要删除sessionStorage中的数据，我们可以使用sessionStorage对象的removeItem方法。例如，要删除键为”username”的数据：
sessionStorage.removeItem("username");
总结
在本文中，我们详细介绍了Javascript中的三种主要存储方式：Cookie、localStorage和sessionStorage。每种存储方式都有其独特的特点和用途，我们可以根据实际需求选择合适的存储方式来保存数据。Cookie适合保存较小且需要在每次请求中发送给服务器的数据，而localStorage和sessionStorage适合保存较大的数据，并且不需要在每次请求中发送给服务器。在实际开发中，我们可以灵活运用这些存储方式来提高用户体验和页面性能。