HTML5 提供了一些用于在客户端存储数据的新特性,其中包括 localStorage 和 sessionStorage。这两种存储方式都可以在客户端存储数据,以便在用户关闭浏览器后仍然可以访问这些数据。
localStorage
localStorage 允许您在浏览器中存储键值对数据,这些数据将一直保留在客户端,直到用户手动删除它们。这意味着即使用户关闭浏览器后再次打开,存储的数据仍然会保留。
使用方法
// www.javascriptcn.com code example
// 存储数据
localStorage.setItem('name', 'John');
// 获取数据
const name = localStorage.getItem('name');
// 删除数据
localStorage.removeItem('name');
// 清空所有数据
localStorage.clear();注意事项
- localStorage 存储的数据是以字符串形式存储的,如果需要存储对象或数组,需要先将其转换为字符串。
- localStorage 存储的数据大小限制为 5MB。
sessionStorage
sessionStorage 与 localStorage 类似,但是存储的数据只在当前会话中有效。当用户关闭浏览器标签或窗口时,存储的数据将被清除。
使用方法
// www.javascriptcn.com code example
// 存储数据
sessionStorage.setItem('age', '30');
// 获取数据
const age = sessionStorage.getItem('age');
// 删除数据
sessionStorage.removeItem('age');
// 清空所有数据
sessionStorage.clear();注意事项
- sessionStorage 存储的数据也是以字符串形式存储的。
- sessionStorage 存储的数据仅在当前会话中有效,关闭浏览器后数据将被清除。
在开发 web 应用程序时,您可以根据实际需求选择使用 localStorage 还是 sessionStorage 来存储客户端数据。localStorage 适用于需要长期存储的数据,而 sessionStorage 则适用于仅在当前会话中使用的数据。