阅读量:0
存储时，localStorage 是持久性存储，而 sessionStorage 只在页面会话期间有效。
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地
localStorage
localStorage是一种在客户端（浏览器）上持久化存储数据的方法，其生命周期是永久的，除非主动清除这些信息，localStorage通常用于存储需要长期保留的数据，例如用户的设置、登录状态等，它仅在客户端保存数据，不参与与服务器的通信，以下是localStorage的一些基本操作：
1、保存数据到本地：使用localStorage.setItem(key, value)方法。
2、从本地存储获取数据：使用localStorage.getItem(key)方法。
3、从本地存储删除某个已保存的数据：使用localStorage.removeItem(key)方法。
4、清除所有保存的数据：使用localStorage.clear()方法。
// 示例代码 localStorage.setItem('Author', 'local'); // 保存数据 console.log(localStorage.getItem('Author')); // 读取数据 localStorage.removeItem('Author'); // 删除数据 localStorage.clear(); // 清除所有数据sessionStorage
sessionStorage与localStorage类似，但它的生命周期仅限于当前会话，当页面或浏览器关闭时，sessionStorage中的数据会被自动清除，sessionStorage适合用于存储临时数据，如用户在单个会话中的操作记录。
1、保存数据到本地：使用sessionStorage.setItem(key, value)方法。
2、从本地存储获取数据：使用sessionStorage.getItem(key)方法。
3、从本地存储删除某个已保存的数据：使用sessionStorage.removeItem(key)方法。
4、清除所有保存的数据：使用sessionStorage.clear()方法。
// 示例代码 sessionStorage.setItem('Author', 'session'); // 保存数据 console.log(sessionStorage.getItem('Author')); // 读取数据 sessionStorage.removeItem('Author'); // 删除数据 sessionStorage.clear(); // 清除所有数据复杂数据的存储
对于复杂的数据类型，如对象或数组，直接存储是不行的，需要使用JSON.stringify将对象转换成字符串，然后再存储；读取时再使用JSON.parse将字符串转换回对象。
var user = { username: 'liu', password: '123456' }; user = JSON.stringify(user); // 转换为字符串 sessionStorage.setItem('user', user); // 存储数据 var account = sessionStorage.getItem('user'); // 读取数据 account = JSON.parse(account); // 转换回对象 console.log(account);表格对比
| 特性 | localStorage | sessionStorage |
| 生命周期 | 永久 | 当前会话 |
| 数据存储位置 | 客户端（浏览器） | 客户端（浏览器） |
| 数据大小 | 一般为5MB | 一般为5MB |
| 数据共享性 | 同源策略下的所有页面共享 | 仅在同一会话中的页面共享 |
| 典型应用场景 | 用户设置、登录状态等长期数据 | 临时数据，如单次会话的操作记录 |
| API | setItem, getItem, removeItem, clear | setItem, getItem, removeItem, clear |
相关问答FAQs
问题1：localStorage和sessionStorage有什么区别？
答：localStorage和sessionStorage的主要区别在于数据的生命周期和存储时间，localStorage中的数据是永久存储的，除非主动删除，否则数据会一直存在，而sessionStorage中的数据仅在当前会话有效，关闭页面或浏览器后数据会被清除，localStorage的数据可以跨多个标签页和浏览器窗口共享，而sessionStorage只能在当前会话的页面中使用。
问题2：如何存储和读取复杂的数据类型？
答：对于复杂的数据类型（如对象或数组），不能直接存储到localStorage或sessionStorage中，需要先将对象或数组转换成字符串，可以使用JSON.stringify方法进行转换，读取时再使用JSON.parse方法将字符串转换回对象或数组。
var user = { username: 'liu', password: '123456' }; user = JSON.stringify(user); // 转换为字符串 sessionStorage.setItem('user', user); // 存储数据 var account = sessionStorage.getItem('user'); // 读取数据 account = JSON.parse(account); // 转换回对象 console.log(account); // 输出 {username: "liu", password: "123456"}HTML5 Web存储方式：localStorage与sessionStorage
随着Web应用的发展，用户数据的本地存储变得尤为重要，HTML5提供了两种本地存储方式：localStorage和sessionStorage，这两种存储方式使得Web应用能够存储大量的数据，并且能够在不同的页面间共享或隔离这些数据。
localStorage
定义
localStorage是一种持久化的存储方式，它可以存储大量的数据，并且这些数据会永久保存在用户的浏览器中，直到显式地被删除。
特性
持久性：数据在浏览器关闭后仍然存在。
大量存储：理论上可以存储5MB左右的数据。
键值对存储：存储的数据以键值对的形式存在。
同源限制：只能访问同源下的数据。
使用方法
// 存储数据 localStorage.setItem('key', 'value'); // 获取数据 var value = localStorage.getItem('key'); // 删除数据 localStorage.removeItem('key'); // 清空所有数据 localStorage.clear();sessionStorage
定义
sessionStorage是一种会话存储方式，它与localStorage类似，但存储的数据在页面会话结束后会被清除。
特性
会话性：数据在浏览器关闭或页面会话结束后会被清除。
同源限制：只能访问同源下的数据。
键值对存储：存储的数据以键值对的形式存在。
使用方法
// 存储数据 sessionStorage.setItem('key', 'value'); // 获取数据 var value = sessionStorage.getItem('key'); // 删除数据 sessionStorage.removeItem('key'); // 清空所有数据 sessionStorage.clear();localStorage：适用于需要持久存储的数据，如用户设置、偏好等。
sessionStorage：适用于需要临时存储的数据，如用户在某个会话期间产生的数据。
选择哪种存储方式取决于具体的应用场景和需求，在实际应用中，应当合理使用这两种存储方式，以提升用户体验和应用的性能。
