引言

在数字时代，随着Web应用的不断发展和复杂化，如何高效、安全地在浏览器中存储和管理数据成为了一个重要的问题。浏览器存储技术的出现，为开发者们提供了一系列灵活多样的解决方案，使得Web应用能够在用户设备上存储持久或临时的数据，从而提升用户体验、优化应用性能。本文将分享一下浏览器存储的几种主流技术：LocalStorage、SessionStorage、Cookies和IndexedDB，通过简要介绍技术的一些特点并分享一些实践代码，希望能够帮助读者更好地掌握和应用这些技术，为自己的Web应用开发增添新的亮点。

LocalStorage

1.特点

• 浏览器本地存储，时效性是永久有效，除非用户手动清除浏览器缓存
• 数据以字符串形式存储，但可以存储任何可以转换为字符串的JavaScript对象
• 储容量通常限制在5MB左右，不同的浏览器会有所不同
• 为每一个域名开辟的存储空间，因此一个域不能访问其他域存储在localStorage中的数据

2.实践

创建一个localStorage.html文件，写一个简单的页面，页面有四个按钮用于演示如何使用浏览器的localStorage API 来保存、读取、删除和清空存储在用户浏览器中的数据。

HTML结构

    <button id="save">保存</button>
    <button id="get">读取</button>
    <button id="del">删除</button>
    <button id="clear">清空</button>

JavaScript部分

以下四个方法通常与Web存储（特别是localStorage和sessionStorage）中的操作相关：

• setItem(key, value)：在数据存储中设置一个键值对
• getItem(key)：从数据存储中检索与给定键关联的值
• removeItem(key)：从数据存储中删除与给定键关联的值
• clear()：从数据存储中删除所有键值对

 const user = {
            name: 'xx',
            age: 18
        }

document.getElementById('save').addEventListener('click', () => {
            localStorage.setItem('userInfo', JSON.stringify(user)) 
        })

document.getElementById('get').addEventListener('click', () => {
            console.log(JSON.parse(localStorage.getItem('userInfo')));  
        })
        
document.getElementById('del').addEventListener('click', () => {
            localStorage.removeItem('userInfo')
        })

document.getElementById('clear').addEventListener('click', () => {
            localStorage.clear()
        })

注意：由于 localStorage 存储的是字符串，所以当你需要存储或检索非字符串类型的数据时（如对象或数组），你需要使用 JSON.stringify() 和 JSON.parse() 方法来进行序列化和反序列化。

SessionStorage

1.特点

• 时效性：当前会话有效，会话结束就会自动销毁
• 以字符串形式存储
• 储容量通常也限制在5MB左右
• 数据在同一浏览器会话中的所有页面和标签页中共享
• 与localStorage相比，sessionStorage更适合存储临时数据，如用户在当前会话中的交互状态

2.实践

localStorage与sessionStorage在浏览器中的存储操作非常相似，都提供了相似的 API 方法，如 setItem(), getItem(), removeItem(), clear()等，所以此处代码省略。

Cookies

1.特点

• 时效性:根据设置的过期时间
• 不受前端掌控，由后端控制
• Cookies的存储容量较小，通常限制在4KB左右

IndexedDB

1.特点

• 浏览器提供的本地数据库
• 异步存储，允许浏览器继续响应用户输入和其他事件
• 支持使用 js 编写存储逻辑来创建、打开、插入、查询、删除 IndexedDB 中的数据
• 键值对存储
• 大容量（IndexedDB存储容量理论上没有上限，因为它基于用户的硬盘空间）
• 永久存储，只要用户不清除浏览器的存储或删除数据库文件，数据就会一直保留在设备上

2.实践

HTML结构

提供了多个用于触发不同的数据库操作的按钮

    <button onclick="openDB()">连接数据库</button>
    <button onclick="createDB()">新建数据库</button>
    <button onclick="insertOneDB()">插入一条数据</button>
    <button onclick="insertMultiDB()">插入多条数据</button>
    <button onclick="queryDB()">查询数据</button>
    <div id="table"></div>

JavaScript部分

以下代码使用JavaScript的IndexedDB API来操作本地数据库

const dbName = 'users'
const dbVersion = 1.0
let db = null

连接或创建数据库：

 function openDB() {
     const request = indexedDB.open(dbName, dbVersion)
     request.onerror = function() {
         console.log('无法打开数据库');
     }
     request.onupgradeneeded = function(event) {
         db = event.target.result
         // 创建一个表
         const objectStore = db.createObjectStore('sex', {keyPath: 'id'})
         objectStore.createIndex('title', 'title', {unique: true})
 
     request.onsuccess = function(event) {
         // console.log(event);
         db = event.target.result
         console.log(`数据库${db.name}已经开启`);
     }
 }

插入一条数据：

function insertOneDB() {
    console.log(db);
    const transaction = db.transaction(['sex'], 'readwrite')
    .objectStore('sex')
    .add({id: 1, title: '男生', author: '张三', createAt: Date.now()}
    transaction.onerror = function() {
        console.log('数据写入失败');
    }
    transaction.onsuccess = function() {
        console.log('数据写入成功');
    }
}

插入多条数据：

function insertMultiDB() {
    const data = [
        {id: 2, title: '男生1', author: '李四', createAt: Date.now()},
        {id: 3, title: '男生2', author: '王五', createAt: Date.now()},
        {id: 4, title: '女生', author: '赵六', createAt: Date.now()}
    ]

    const transaction = db.transaction(['sex'], 'readwrite')
    const objectStore = transaction.objectStore('sex')
    data.forEach((item) => {
        const request = objectStore.add(item)
        request.onsuccess = function() {
          console.log('数据已添加');
        }
    })
    transaction.oncomplete = function () {
        console.log('所有数据写入完成');
        db.close()
    }
}

查询数据：

function queryDB() {
    const transaction = db.transaction(['sex'], 'readonly')
    const objectStore = transaction.objectStore('sex')
    const index = objectStore.index('
    const range = IDBKeyRange.only('女生')
    const request = index.openCursor
    request.onsuccess = function(event) {
        console.log(event.target.result.value);
}

总结

localStorage适合于存储客户端不需要过期且跨窗口（或标签页）持久化的数据。例如，用户偏好设置、主题选择、是否已登录等状态信息，这些数据不敏感，且不需要服务器知晓或参与维护。

sessionStorage适合当需要在当前会话期间（即浏览器窗口或标签页关闭前）临时保存数据时使用。比如，表单输入的草稿保存、用户在购物车中添加的商品等，这些数据仅限于当前会话，关闭页面后即被清除。

Cookies主要用于服务器跟踪和跨站点身份验证，但由于其大小和数量的限制，通常不用于存储大量数据。

IndexedDB是一个功能强大的本地数据库，适合存储大量结构化的数据，并支持复杂的查询和数据检索。它适用于需要在客户端存储大量结构化数据的应用，如离线存储应用数据、图片、音频视频文件等。

所以在选择存储机制时，我们应该根据应用的需求和场景来做出决策，要综合考虑数据的大小、是否需要长期保存、是否需要跨窗口共享、是否需要服务器交互等因素，选择最合适的存储方法。