HTML 5中增加了两种新的数据存储方式，一种是Web Storage，一种是Web SQL Database。前者可用于在客户端临时或永久存储少量数据，而后者是客户端的本地化数据库系统。通过这个数据系统，无需与服务器交互就可以在客户端存储大量数据，大大减轻了服务器的压力，加快了其他页面的浏览速度。
LocalStorage对象
SessionStorage对象只能在用户打开浏览器后保存临时会话数据，关闭浏览器后这些数据将会丢失。因此，如果需要在客户端长时间保存数据，不建议使用sessionStorage对象，需要使用HTML 5中新提供的localStorage对象，这样可以在客户端长时间保存数据。在手动清除之前，如果要使用localStorage对象保存数据内容，需要调用对象中的setItem()方法，调用格式如下:
使用localStorage对象和sessionStorage对象保存数据的方法参数描述是一样的，只是被调用的对象不同，也是根据(键名，key key)调用setItem()方法设置的。
使用localStorage对象保存数据后，就像sessionStorage对象一样，可以通过调用对象中的getItem()方法读取指定键名对应的键值。调用格式如下:
其中，参数键是需要读取键值内容的键名。像sessionStorage对象一样，如果键名不存在，将返回空值。
localStorage对象可以在客户端长期存储内容，即使浏览器重新打开也不会丢失。如果需要清除本地存储对象中存储的内容，需要调用本地存储对象的另一个方法removeItem()。调用格式如下:
其中，参数键表示要删除的键名。一旦删除成功，与键名对应的所有数据都将被删除。
下面通过例子描述使用localStorage对象保存和读取登录用户名和密码的过程。
实例使用本地存储对象来保存和读取登录用户名和密码
1.功能描述
创建新的登录页面。当用户在文本框中输入用户名和密码时，单击“登录”按钮，登录用户名将使用localStorage对象保存。如果选择“保存密码”选项，将保存登录密码；否则，先前保存的密码将被清除空。当页面在浏览器中重新打开时，保存的用户名或密码数据将显示在相应的文本框中。
2.实现代码
在Dreamweaver CS5中创建一个新的HTML页面test.html，并添加代码，如代码列表所示。
代码清单使用localStorage对象保存和读取登录用户名和密码。
在一个例子中，一个Java文件js2.js被导入到页面中，在这个文件中，定制了两个函数，在加载页面并点击“登录”按钮时调用这两个函数。实现代码如代码清单所示:
3.页面效果
这个页面在Chrome 10浏览器中执行的页面效果如下图所示:
该图显示了使用localStorage对象保存和读取登录用户名和密码的效果
4.源代码分析
在本例中，加载页面时，将调用用户定义的pageload()函数。在此函数中，指定键名的键值首先由localStorage对象中的getItem()方法获取，并存储在变量中。如果不是空，变量值将赋给相应的文本框。下次用户登录时，无需再次输入，方便用户操作。
当用户点击“登录”按钮时，将触发onClick事件。在这种情况下，调用另一个用户定义的函数btnLogin_click()。该函数首先通过两个变量分别保存文本框中输出的用户名和密码，然后调用localStorage对象中的setItem()方法。将用户名保存为KeyName“KeyName”的键值。如果选择“保存密码”选项，密码将保存为键名“keyPass”的键值。否则，将调用localStorage对象中的removeItem()方法来删除键为“keyPass”的记录。有关详细的实现过程，请参见代码的粗体部分。
需要注意的是，虽然localStorage对象可以用来在客户端长期存储数据，但是跨浏览器读取数据时，存储的数据是不能共享的，即每个浏览器只能读取自己浏览器中存储的数据，而不能访问其他浏览器中存储的数据。
1.《storage HTML 5中 Web Storage API介绍》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《storage HTML 5中 Web Storage API介绍》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/shehui/1128683.html
