HTML5本地存储数据保存技巧

本篇文章向大家介绍《HTML5本地存储保存数据方法》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

HTML5提供五种浏览器端持久化存储方案：一、localStorage（长期键值对）；二、sessionStorage（会话级键值对）；三、IndexedDB（异步结构化数据库）；四、Cookie（小量HTTP传输数据）；五、Cache API（资源文件缓存）。

如果您希望在用户浏览器中持久化保存数据，而无需依赖服务器端存储，则可以利用HTML5提供的本地存储机制。以下是实现此目标的几种不同方法：

一、使用localStorage保存数据

localStorage是一种同步的键值对存储机制，数据在页面关闭后仍保留在浏览器中，且同源页面可共享访问。它适用于保存字符串类型的数据，如用户偏好设置或表单草稿。

1、调用localStorage.setItem()方法，传入键名和键值，例如：localStorage.setItem('username', 'Alice')。

2、确保键值为字符串类型，若需保存对象，先使用JSON.stringify()序列化。

3、读取时使用localStorage.getItem('username')获取对应值。

4、删除指定键值对可调用localStorage.removeItem('username')。

5、清空全部数据可执行localStorage.clear()。

二、使用sessionStorage保存数据

sessionStorage与localStorage接口一致，但其生命周期仅限于当前浏览器标签页会话期间，关闭标签页后数据自动清除。适用于临时性数据，如多步骤表单的中间状态。

1、使用sessionStorage.setItem('step', '2')保存当前步骤编号。

2、通过sessionStorage.getItem('step')读取该编号以恢复流程。

3、刷新页面不会导致sessionStorage数据丢失，仅关闭标签页才会清除。

4、调用sessionStorage.removeItem('step')可移除特定项。

5、使用sessionStorage.clear()可一次性清空当前会话所有键值对。

三、使用IndexedDB保存结构化数据

IndexedDB是一个低级、异步、事务型的客户端数据库，支持存储大量结构化数据（包括文件和二进制对象），适合需要复杂查询或离线应用的场景。

1、调用window.indexedDB.open('myDB', 1)打开或创建数据库，版本号必须为整数。

2、在onupgradeneeded事件中创建objectStore并设置主键路径，例如：objectStore.createIndex('by_date', 'date')。

3、获取事务对象后，使用objectStore.add({id: 1, content: 'note'})插入数据。

4、通过objectStore.get(1)按主键检索记录。

5、使用cursor遍历所有数据时，需在onsuccess回调中检查event.target.result是否为null以终止循环。

四、使用cookie保存小量数据

Cookie是传统Web存储方式，随每个HTTP请求自动发送至服务器，适合保存身份标识等需服务端协同的数据。其容量限制严格（通常≤4KB），且影响网络性能。

1、通过document.cookie = 'theme=dark; expires=Fri, 31 Dec 2099 23:59:59 GMT; path=/'设置带过期时间的cookie。

2、设置Secure属性确保仅通过HTTPS传输：; Secure。

3、添加HttpOnly属性防止JavaScript访问敏感cookie：; HttpOnly。

4、读取时需手动解析document.cookie字符串，按;分割并查找目标键值对。

5、删除cookie可通过设置已过期的expires时间实现，例如：expires=Thu, 01 Jan 1970 00:00:00 GMT。

五、使用Cache API缓存资源文件

Cache API属于Service Worker生态，专用于缓存HTTP响应（如HTML、CSS、JS、图片），不直接存储任意数据，但可用于构建离线优先应用的数据预加载策略。

1、在Service Worker注册后，调用caches.open('v1')获取命名缓存实例。

2、使用cache.put(new Request('/app.js'), response.clone())将响应存入缓存。

3、通过cache.match('/app.js')检索已缓存的资源。

4、批量缓存多个资源可使用cache.addAll(['/', '/styles.css', '/app.js'])。

5、更新缓存时需先打开新缓存，填充内容，再调用caches.delete('v1')移除旧缓存。

今天关于《HTML5本地存储数据保存技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！