<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

再将其转换会对象.

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

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