1. localStorage:
- localStorage 允许在浏览器中存储键/值对,并在同一域名下的页面之间进行共享。存储的数据在浏览器关闭后仍然保留,直到用户手动清除浏览器缓存或通过JavaScript代码删除。
// 存储数据
localStorage.setItem('username', 'John');
// 获取数据
var username = localStorage.getItem('username');
// 删除数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
2. sessionStorage:
- sessionStorage 与 localStorage 类似,但是存储的数据在用户关闭浏览器标签或窗口后会被清除。因此,sessionStorage 用于临时会话数据的存储。
// 存储数据
sessionStorage.setItem('theme', 'light');
// 获取数据
var theme = sessionStorage.getItem('theme');
// 删除数据
sessionStorage.removeItem('theme');
// 清空所有数据
sessionStorage.clear();
这两种存储机制使用简单,但需要注意的是存储在其中的数据是以字符串形式存储的。如果需要存储复杂的对象,可以使用 JSON.stringify 将对象转换为字符串进行存储,然后使用 JSON.parse 进行检索时的解析。
// 存储对象
var user = { name: 'John', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 获取对象
var storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: John
请注意,由于存储在本地的数据可以被JavaScript代码访问,因此不应该将敏感信息存储在 localStorage 或 sessionStorage 中。对于敏感信息,应该在服务器端进行处理。
转载请注明出处:http://www.zyzy.cn/article/detail/3679/HTML5