<HeadFirst_HTML5> O'REILLY_Chap.9_Web存储(本地存储)

<HeadFirst_HTML5> O’REILLY_Chap.9_Web存储(本地存储)

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML5>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML5>翻译 林琪 张伶

正文

原文

BULLTE POINTS(要点):

• Web;存储是浏览器中的一个存储库, 也是一个API, 可以用来从这个本地存储库保存和获取数据项.

• 大多数浏览器都为每个源提供了至少5MB的存储空间.

• Web存储包括本地存储和会话存储.

• 本地存储是持久的, 即使你关闭浏览器窗口或退出浏览器, 本地存储仍然保留.

• 会话存储中数据项会在你关闭浏览器窗口或退出浏览器时删除. 会话存储很适合临时数据项, 而是长期存储.

• 本地存储和会话存储使用完全相同的API.

• Web存储按源(可以认为是域)来组织. 源就是Web上文档的位置(例如, wickedlysmart.com或headfirstlabs.com).

• 每个域有一个单独的存储空间, 所以存储在一个源的数据项对于另一个源中的Web页面是不可见的.

• 使用 localStorage.setItem(key) 可以向本地存储增加一个值.

• 使用 localStorage.getItem(key) 可以从本地存储中获取一个值.

• 可以使用与关联数组相同的语法在本地存储中设置和获取数据项. 可以使用 localStorage[key] 来完成.

• 可以使用 localStorage.key() 方法列出 localStorage 中的数据项数.

• 使用浏览器中的控制台可以查看和删除 localStorage 中的数据项.

• 可以从 localStorage 直接删除数据项, 只需右键点击一个数据项, 并选择 delete (注意, 并非所有浏览器都奏效).

• 可以在代码中使用 removeItem(key) 方法和 clear 方法删除 localStorage 中的数据项, 注意, clear 方法会删除你完成这个清空操作时源在 localStorage 中的所有内容.

• 每个 localStrorage 数据项的键必须是唯一的. 如果使用与一个现有的数据项相同的键, 会覆盖这个数据项的值.

• 要生成一个唯一的键, 一种方法是使用当前的时间(自1970年以来的毫秒数), 并使用 Data 对象的 getTime() 方法.

• 要为的Web应用创建一个合适的命名机制, 使得即使数据项从本地存储删除, 或者如果另一个应用在本地存储中创建了数据项, 也能正常工作.

• Web存储目前只支持存储字符串作为对应键的值.

• 可以使用 parseInt 或 parseFloat 将 localStorage 中作为字符串存储的数字转化为真正的数字.

• 如果需要存储更复杂的数据, 可以使用JavaScript对象, 在存储之前会使用 JSON.stringify 把它们转换为字符串, 在获取之后会使用 JSON.parse 再将其转换会对象.

• 本地存储对于移动设备尤其有用, 可以用来降低宽带需求.

• 会话存储类似于本地存储, 只不过浏览器存储库中保存的内容不贵持久存储, 如果你关闭标签页, 窗口或退出浏览器, 它们就不复存在. 会话存储对于短期存储很有用, 如购物会话.