Web Storage有两种形式，分别是localStorage（本地存储）和sessionStorage（会话存储）。这两种形式都允许开发者使用JavaScript设置“键值对”，并在重新加载不同页面的时候读出里面的数据。这点和Cookie机制非常类似。但是和Cookie不同的是，Web Storage的数据是完全存储在客户端的，无须通过浏览器请求再传输到服务器。由此可见，和Cookie方式相比，Web Storage可以在本地存储更多的数据。
localStorage和sessionStorage在功能上是一样的，只是在持久性和范围上有所不同。
（1）tocalStorage
即使已经关闭了浏览窗口，数据也会被保存起来并可用于所有来自同源（必须有相同的域名、协议和端口）窗口（或者标签页）的加载，这对于参数设置或是偏好设置之类的功能非常有用。
（2）sessionStorage
数据存储在窗口对象中，对于其他窗口或者标签页来说不可见，并且当窗口关闭时会丢失数据。sessionStorage可用于特殊的窗口状态，例如一个标签页的高亮状态或者一个表格的排序状态。在现实应用中，sessionStorage都可以用localStorage来代替。但是在关闭窗口或者标签页时，会丢失sessionStorage存储的数据。
设置参数的方法非常简单，例如：
访问一个存储的数据的方法也非常简单，例如：
可以用如下代码删除一个特定的键值对。
或者用如下代码删除所有的键值对。
假设键是有效的JavaScript token，比如没有空格、没有除下画线之外的标点，则可以使用如下的代码实现。
其实localStorage和sessionStorage中的键是分开存储的。即使在两种存储中使用同样的键名，也是没有冲突的。
在下面的内容中，将举例说明将用户设置保存到本地和将选中的数据保存到SessionStorage中的方法。
1.将用户设置保存到本地
接下来介绍一个实际的例子，目的是更新本章前面例子中的Settings面板，此时可以让它把表单数据存储到localStorage当中。接下来会有相当数量的JavaScript代码，但是并不准备把它们都放进HTML文件的head标签中。为了保持代码的工整性，在存放HTML文档的相同路径下创建一个名为123.js的文件，同时更新HTML文件中的head部分来引用123.js。
由此可见，在更新的同时也从HTML的head部分删除了jQTouch的构造函数。其实它并没有被删除，只是被移到文件123.js中。但是需要确保从HTML的head部分中删除上述提到的内容，并且在相同路径下建立如下内容的123.js文件，然后在浏览器中刷新主HTML文件以确保它仍旧可以工作。
代码经过重新组织以后，接下来就可以添加保存设置代码。需要重写settings表单的提交动作的代码，并用一个名为saveSettings（）的自定义函数来替换。因为用到了jQTouch，所以只需要修改Document Ready函数中如下的一行代码，即将下面的代码加入到123.js中。(www.xing528.com)
这段代码的作用是，当用户提交settings表单时，用saveSettings（）函数代替表单的提交动作。当调用saveSettings（）函数时，会用jQTouch的val（）函数获得表单的3个输入项，并且分别存入localSto rage这个同名变量中。将函数加入123.js中的代码如下。
一旦数值被保存，便调用jQTouch的goBack（）函数来关闭面板并返回前一个页面。接下来返回false给触发这个函数的提交事件，以防进行默认的提交操作。如果没有这行代码，现有页面会被重新加载一次。
到此为止已经可以运行程序，前往Settings面板输入设置信息，然后提交表单将设置存储到locaIStorage中。由于在提交表单时没有清空相关字段，所以当用户再次访问Settings面板时，仍然会存在上次输入的数据。然而这不是因为使用了localStorage保存的缘故，而是因为只要在输入后不进行清理操作，这些字段就会一直在那里。因此，当用户下次重新运行程序并访问Settings面板时，即使这些字段被保存了也仍会丢失。
为了解决这个问题，需要使用函数loadSettings（）来加载配置，所以在文件123.js中添加如下函数。
函数loadSettings（）正好和函数saveSettings（）相反，它使用local Storage中的相应字段来调用jQTouch的函数val（），目的是设置Settings表单中的3个字段值。
接下来需要触发已有的loadSettings（）函数，当程序启动时进行触发动作。为了实现这个功能，在文件123.js的document ready函数中添加如下代码。
上述代码只是在程序启动时加载配置，这样会存在一个漏洞：如果当用户访问Settings面板并改动了一些值，然后单击Cancel按钮而非提交表单，程序下次就不能加载正确的配置。在这种情况下，当用户再次访问Settings面板时会显示最新的修改。这不是因为这些新的数据被保存了（实际上并没有），而只是界面显示的问题。如果用户关闭并重新启动程序，显示的数据又会变成之前保存的数据，因为函数loadSettings（）会在程序启动的时候还原字段中的数据。
其实有很多方法可以改变这种情况，但最合适的方法是每次当移动Settings面板时，无论进入还是退出，都需要刷新显示的数据。在jQTouch中提供了一种简单的方法将函数loadSettings（）和Settings面板的pageAnimationStart事件绑定起来。将刚刚加入的代码用如下加粗的代码来代替。
现在文件123.js中的JavaScript代码为Settings面板提供了持久化的数据存储。以下是当前文件123.js中的代码。
2.将选中的数据保存到Session Storage中
因为希望允许用户在数据库中添加或者删除条目，所以需要支持Date面板上提供“+”按钮和Delete按钮。在具体实现时，第一步是当用户从Dates面板访问Date面板时，需要让Date面板获知用户单击的是哪个条目。有了这个信息，就可以计算出合适的日期的上下文语境。为了实现这个功能，需要在文件123.js的函数document reday中添加如下的代码。
（1）jQTouch中的click（）函数将它随后的JavaScript代码和Dates面板中的click事件的链接绑定起来。
（2）获取被单击对象的ID，并且将其存入dayOffset变量中。Dates面板中的链接都有从0～5范围的ID，所以被点击的链接的ID就相当于点击日期所需要计算的天数，比如，过去0天表示今天，过去1天表示昨天，过去2天表示前天，依此类推。
（3）创建了一个新的JavaScript日期对象，并且将其存入一个名为date的变量中。首先，这个date会被设置成创建的日期，所以在下一行中会从getDate（）函数的结果中减去dayOffset，再用setDate（）函数将日期设置成选中的日期。其中dayOffset为0表示今天，1表示昨天，依此类推。
（4）生成了一个“MM/DD/YYYY”格式的日期字符串，并将其作为当前日期（currentDate）存入sessionStorage。
（5）调用refreshEnt ries（）函数。此函数的作用是，基于用户单击Dates面板的日期值来更新Date面板。现在只要使用用户选中的日期来更新Dates面板工具栏上的标题，就能看到它起的具体作用。如果没有这个函数，运行后只会出现“Date”字样。函数refreshEntries（）应添加到文件123.js中，具体代码如下。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
