前端经典面试题合集, 浏览器的本地存储方式有哪些,有什么区别,分别有哪些应用场景?
前端经典面试题合集, 浏览器的本地存储方式有哪些,有什么区别,分别有哪些应用场景?
QA
Step 1
Q:: 浏览器的本地存储方式有哪些，有什么区别，分别有哪些应用场景？
A:: 浏览器的本地存储方式主要有以下几种：1. Cookie：用来保存用户的会话信息，大小限制为4KB左右，支持设置过期时间。适用场景：用户登录状态、网站偏好设置等。2. LocalStorage：提供更大存储空间，大小为5MB，不设置过期时间。适用场景：需要长期保存的数据，如用户设置、购物车信息等。3. SessionStorage：与LocalStorage类似，但数据仅在当前会话期间有效，关闭浏览器后数据被清空。适用场景：单个会话中的临时数据，如表单输入信息。4. IndexedDB：适用于存储大量结构化数据，支持事务和索引。适用场景：离线应用、复杂的数据存储和检索。
Step 2
Q:: 什么是Cookie，如何使用？
A:: Cookie是一种在客户端存储少量数据的方式，通常用于保存用户会话信息。使用JavaScript可以通过document.cookie来设置和获取Cookie。示例：document.cookie = 'username=JohnDoe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/'。此示例将用户名'JohnDoe'保存在Cookie中，并设置其在指定日期过期。
Step 3
Q:: LocalStorage和SessionStorage有什么区别？
A:: LocalStorage和SessionStorage都用于客户端存储数据，但有以下区别：1. 生命周期：LocalStorage的数据没有过期时间，除非手动删除，否则会一直存在；SessionStorage的数据仅在当前会话期间存在，关闭浏览器或标签页后数据即被清除。2. 作用范围：LocalStorage的数据在同源的所有窗口中共享；SessionStorage的数据仅在创建它的窗口或标签页中可用。
Step 4
Q:: 什么是IndexedDB，如何使用？
A:: IndexedDB是一种低级API，用于存储大量结构化数据。它允许在客户端存储和查询数据。使用步骤包括：1. 打开数据库：let request = indexedDB.open('MyDatabase', 1);。2. 创建对象存储：在onupgradeneeded事件中创建对象存储：request.onupgradeneeded = function(event) { let db = event.target.result; db.createObjectStore('MyObjectStore', { keyPath: 'id' }); }。3. 添加数据：let transaction = db.transaction(['MyObjectStore'], 'readwrite'); let objectStore = transaction.objectStore('MyObjectStore'); objectStore.add({ id: 1, name: 'John Doe' });。