Javascript + HTML5 本地存储

Javascript + HTML5 localstorage

提问by Alai

So I'm searching for a good crash course on localstorage and interacting with it in Javascript. I want to build a to-do list webapp with some extra functionality but it would be just for 1 user. I don't want to mess with php/mysql and have the server doing anything. Links to tutorials would be best :-D

所以我正在寻找关于 localstorage 的一个很好的速成课程，并在 Javascript 中与它进行交互。我想构建一个具有一些额外功能的待办事项列表 web 应用程序，但它仅适用于 1 个用户。我不想弄乱 php/mysql 并让服务器做任何事情。最好有教程链接:-D

回答by Steve

Here's a crash crash course I found very useful. It explains a bunch of HTML5 concepts, including localStorage, video tag, offline websites, forms, locations, canvas, and more.

这是我发现非常有用的速成课程。它解释了一系列 HTML5 概念，包括 localStorage、视频标签、离线网站、表单、位置、画布等。

http://diveintohtml5.org/storage.html

http://diveintohtml5.org/storage.html

回答by Peter McG

There is the offical documentation:

有官方文档：

http://dev.w3.org/html5/webstorage/

http://dev.w3.org/html5/webstorage/

For a quick demo with code: http://html5demos.com/storagealso more html5 demos at the root of that site.

有关代码的快速演示：http: //html5demos.com/storage 在该站点的根目录中还有更多 html5 演示。

Note there are also things like the YUI 2 Storage Utilitywhich abstract the storage for you (HTML 5, Google Gears, SWF) depending on what the browser supports:

请注意，还有像YUI 2 Storage Utility 之类的东西，它根据浏览器支持的内容为您抽象存储（HTML 5、Google Gears、SWF）：

The Storage Utility provides a mechanism for storing significant amounts of textual data, client-side, whether or not your browsers supports the proposed HTML 5 Storage specification.

存储实用程序提供了一种用于在客户端存储大量文本数据的机制，无论您的浏览器是否支持提议的 HTML 5 存储规范。

回答by Derek Swingley

No personal experience but I did come across this link today: http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/

没有个人经验，但我今天确实遇到了这个链接：http: //www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/

Which links to this: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/

哪个链接到这个：http: //net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/

Have fun!

玩得开心！

回答by Linus Unneb?ck

This small tutorial/code-snippet helped me to get started.

这个小教程/代码片段帮助我入门。

http://hacks.mozilla.org/2009/06/localstorage/

http://hacks.mozilla.org/2009/06/localstorage/

回答by JeroenEijkhof

I would recommend one of the other questions asked here about how to store objects in localStorage. It helped me a lot as I am implementing a code editor that can store multiple files and last state of the user.

我会推荐这里提出的有关如何在 localStorage 中存储对象的其他问题之一。它对我帮助很大，因为我正在实现一个可以存储多个文件和用户最后状态的代码编辑器。

The stackoverflow question
Both answers posted are very valuable.

stackoverflow 问题
发布的两个答案都非常有价值。

Some things to take into consideration:

需要考虑的一些事项：

• When do you store data, after each key pressed or after some other specific action/event?
• Use a temporary Javascript data structure or only interact with localStorage directly?

• 你什么时候存储数据，在按下每个键之后还是在其他一些特定的动作/事件之后？
• 使用临时的 Javascript 数据结构还是直接与 localStorage 交互？

回答by Kamal

Store Data

//Syntax 
localStorage.setItem(Key,Value);

Demo

演示