HTML5关键知识点之HTML5本地存储的全面解析

HTML5关键知识点之HTML5本地存储的全面解析

大家好呀！我写这篇文章，就是希望能和大家一起深入学习HTML5本地存储相关知识，在学习的道路上携手共进、共同进步。下面咱们来系统地梳理一下这里面的知识点。

一、知识点总结

1. 跟踪HTML5存储区的改动：通过捕获storage事件可跟踪存储区改动，调用setItem()、removeItem()或clear()方法且数据真的变动时会触发。IE8虽不支持W3C标准的addEventListener注册事件方法，但也支持storage事件，注册时需检测浏览器支持的事件机制。StorageEvent对象包含key、oldValue、newValue、url（或uri）等有用属性。不过，storage事件无法撤销存储区改动。
2. 现有浏览器的局限性：每个域默认拥有5MB的存储空间，目前这只是建议大小，未正式列入标准。数据最终以字符串类型存储，存储大量整型或浮点型数据时会有变化。存储数据超过配额会抛出QUOTA_EXCEEDED_ERR异常，且开发者无法通过编程扩大存储空间，部分浏览器允许用户控制站点存储空间配额。
3. HTML5存储实践：以Halma游戏为例，利用HTML5存储可解决游戏过程中浏览器窗口关闭导致游戏记录丢失的问题。游戏操作时调用saveGameState()函数存储游戏状态，页面载入时调用resumeGame()函数恢复游戏状态。由于数据以字符串形式存储，获取非字符串类型数据时需手动进行类型转换。

二、通俗讲解

1. 跟踪HTML5存储区的改动：重点来啦！就好比HTML5存储区是一个小仓库，当你在仓库里添加、修改或者删除东西（调用相关方法且数据有变动）时，就会触发一个“小通知”，这就是storage事件。不过IE8这个“小伙伴”有点特殊，它接收通知的方式和别人不太一样，所以注册事件的时候得看看它支持哪种方式。这个“通知”（StorageEvent对象）还会告诉你一些有用的信息，像改动了哪个东西（key）、原来的样子（oldValue）、新的样子（newValue）以及从哪个页面进行的改动（url或uri ）。但要注意，一旦这个“小通知”来了，你是没办法阻止仓库里的改动已经发生的。
2. 现有浏览器的局限性：现在每个域在HTML5存储里都有一个默认的“小仓库空间”，大小是5MB，不过这还不是正式规定的。存东西的时候，不管你原来存的是什么类型的数据，最后都得变成字符串存进去。要是存的数据太多，超过了这个“小仓库”的容量，就会报错。而且目前开发者没办法自己动手把这个“小仓库”变大，只有部分浏览器允许用户自己去调整每个站点能使用的“小仓库”大小。
3. HTML5存储实践：拿Halma游戏来说，以前玩游戏的时候，如果不小心关了浏览器窗口，之前玩的进度就没了，特别让人烦恼。现在有了HTML5存储，就可以把游戏过程中的各种信息（比如游戏进行到什么程度、每个棋子在哪里、走了多少步等）都存起来。游戏进行的时候，有个“小助手”（saveGameState()函数）会帮你把这些信息存到“小仓库”里；等你下次再打开游戏页面的时候，另一个“小助手”（resumeGame()函数）会去“小仓库”里把之前存的信息拿出来，让你接着之前的进度玩。但因为存在“小仓库”里的数据都是字符串形式，所以拿出来的时候，如果原本不是字符串，就得手动“变一变”，变回原来的数据类型。

三、知识点表格总结

知识点	详情
跟踪存储区改动	通过storage事件跟踪，触发条件为相关方法调用且数据变动；IE8支持但注册事件需检测机制；StorageEvent对象含多种属性；事件无法撤销改动
现有浏览器局限	每个域默认5MB存储空间（未正式入标准），数据以字符串存储，超配额抛异常，开发者无法编程扩大空间，部分浏览器用户可控制配额
HTML5存储实践	以Halma游戏为例，用saveGameState()存储游戏状态，resumeGame()恢复；获取非字符串数据需手动类型转换

写作不易，如果这篇文章对大家学习HTML5本地存储有帮助的话，希望大家能点赞、评论支持一下，也请大家关注我的博客，后续还会有更多HTML5相关的精彩内容分享给大家！