番禺建设网站策划,西宁北京网站建设,桂林市区是哪个区,站外推广6种方法目录
localStorage与sessionStorage
localStorage的Set与Get
localStorage传递参数 localStorage与sessionStorage
现代浏览器提供了一种被称为Web Storage APIs#xff08;Web 存储接口#xff09;的机制#xff0c;允许在同一浏览器的不同标签页之间共享数…目录
localStorage与sessionStorage
localStorage的Set与Get
localStorage传递参数 localStorage与sessionStorage
现代浏览器提供了一种被称为Web Storage APIsWeb 存储接口的机制允许在同一浏览器的不同标签页之间共享数据。其中有两种常见的 Web 存储类型localStorage 和 localStorage。
两种 Web 存储类型的使用方法非常类似它们都提供了一个 key-value 的存储方式并在浏览器上下文中保存数据。localStorage中存储的数据在同一浏览器的所有标签页中都是共享的而sessionStorage仅在每个标签页内部共享数据。
localStorage的Set与Get
在页面中设置数据
localStorage.setItem(key, value);
在其他页面中获取数据
var data localStorage.getItem(key);
需要注意的是localStorage 存储的数据只在同一浏览器中有效如果用户更换了浏览器或在另一台设备上打开网站则无法访问之前存储的数据。此外对于同一域名下的不同子域名它们之间也不能共享 Web 存储数据例如example.com 和 www.example.com 之间不能直接共享 storage 数据。
localStorage传递参数
在使用 localStorage.setItem() 方法存储数据时需要将 JavaScript 对象类型的数据转换成字符串类型。可以使用 JSON.stringify() 方法将 JavaScript 对象序列化为 JSON 字符串然后再将其存储到 localStorage 中。
例如在下面的示例中我们将一个包含多个属性的 JavaScript 对象存储到 localStorage 中
var user {name: John,age: 30,email: johnexample.com
};
// 将 JavaScript 对象转换为 JSON 字符串并存储到 localStorage 中
localStorage.setItem(user, JSON.stringify(user));
如果不进行 JSON 转换将直接将 JavaScript 对象存储到 localStorage 中这样可能会导致一些问题。因为 localStorage 只能存储字符串类型的数据如果存储非字符串类型的数据则可能无法正确解析或读取这些数据。
在读取存储的数据时可以使用 JSON.parse() 方法将 JSON 字符串转换回 JavaScript 对象类型
// 从 localStorage 中读取数据并将其转换为 JavaScript 对象
var storedUser JSON.parse(localStorage.getItem(user));
// 访问对象的属性
console.log(storedUser.name); // 输出John
console.log(storedUser.age); // 输出30
console.log(storedUser.email); // 输出johnexample.com
因此建议在使用 localStorage 存储数据时先进行 JSON 转换以确保数据能够正确存储和读取。
