GWT 对 HTML5 storage 的支持和实现（3）

look_w

从 Storage 对象中读取数据在 Storage 中数据是以 Key-Value 的方式存储的，所以我们需要根据 key 去取数据，当知道 key 值时，可以根据 key 值直接取数据，当然也可以通过遍历元素通过索引去取数据。下面我们可以通过示例代码来看 GWT 是如何读取 Storage 中的数据的。
清单 2

1 2 3 4 5 6 7 8 9 10 11

import com.google.gwt.storage.client.Storage; private FlexTable stocksFlexTable = new FlexTable(); private Storage stockstore = null; stockStore = Storage.getLocalStorageIfSupported(); if (stockStore != null){ for (int i = 0; i < stockStore.getLength(); i++){ String key = stockStore.key(i); stocksFlexTable.setText(i+1, 0, stockStore.getItem(key)); stocksFlexTable.setWidget(i+1, 2, new Label());   } }

使用 StorageMap 快速检测指定的 Key 或者 Value 是否存在StorageMap 提供了检测 key 或者 value 是否已经存在的方法。在 StorageMap 的构造方法中可以接受一个 Storage 对象，这样就可以使用 containsValue() 或 containsKey() 方法进行相应的检测。
清单 3

1 2 3 4 5 6 7

stockStore = Storage.getLocalStorageIfSupported(); if (stockStore != null) { stockMap = new StorageMap(stockStore); if (stockMap.containsValue(symbol)!= true){ int numStocks = stockStore.getLength(); stockStore.setItem("Stock."+numStocks, symbol); }

清单 4.向 Storage 对象中写入数据

1 2 3 4 5 6 7

import com.google.gwt.storage.client.Storage; final String textBox =newSymbolTextBox.getText().toUpperCase().trim(); stockStore = Storage.getLocalStorageIfSupported(); if (stockStore != null) { int numStocks = stockStore.getLength(); stockStore.setItem("Stock."+numStocks, gwtTextBox); }

从 Storage 对象中删除数据GWT 提供了在 Storage 中删除一个单独的 Key-Value 数据的方法，同时提供了删除所有 Storage 所有数据的方法。
1、删除指定的键-值对

1 2	根据 key 值删除:  myStorage.removeItem(myKey); 根据索引删除：  myStorage.key(myIndexValue);

2、清除 Storage 对象

1	清除 Storage 的所有内容： myStorage.clear();

Storage 事件处理您可以为 Storage 对象添加 Storage event handler, 当发生删除或者修改数据时，这些事件可以被当前的 window 或者 Tab 所调用。接下来我们来看一下 GWT StorageEvent 究竟提供了哪些方法呢?
表 2.StorageEvent方法名描述getKey被修改的键getNewValue修改后的值（如果是删除键值，则该属性为 null）getOldValue修改前的值（如果是增加新的键值，则该属性为 null）getStorageArea当事件被触发时，返回 SessionStorage 或 LocalStorage 对象getURL触发当前存储事件的页面的 url
清单 5

1 2 3 4 5 6 7 8 9 10 11 12

import com.google.gwt.storage.client.Storage; import com.google.gwt.storage.client.StorageEvent; private Storage stockstore = null; stockStore = Storage.getLocalStorageIfSupported(); if (stockStore != null) {   stockStore.addStorageEventHandler(new StorageEvent.Handler() {   public void onStorageChange(StorageEvent event) {     lastStockLabel.setText("Last Update: "+event.getNewValue() +": "\         +event.getOldValue() +": " +event.getUrl());   } });

实际例子以下程序是一个实际在 GWT 应用中使用 Storage 的例子，本例是将用户名密码存入 Storage 中，然后在从 Storage 中取出展示，可以作为一个参考。
清单 6

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.storage.client.Storage; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.DialogBox; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class HTML5Demo implements EntryPoint { /** * This is the entry point method. */ public void onModuleLoad() { VerticalPanel vp = new VerticalPanel(); Button saveToStorage = new Button("saveToStorage"); Button getFromStorage = new Button("getFromStorage"); final TextBox nameField = new TextBox(); nameField.setText("User Name"); final TextBox passWordField = new TextBox(); passWordField.setStyleName("Password"); passWordField.setText("Password"); final DialogBox dialogBox = new DialogBox(); final Storage stockStore = Storage.getLocalStorageIfSupported(); saveToStorage.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { if(Storage.isLocalStorageSupported()) { stockStore.setItem("userName", nameField.getText()); stockStore.setItem("password", passWordField.getText()); } } }); getFromStorage.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { if(Storage.isLocalStorageSupported()) { VerticalPanel vp = new VerticalPanel(); Label userName = new Label(); userName.setText(stockStore.getItem("userName")); Label password = new Label(); password.setText(stockStore.getItem("password")); vp.add(userName); vp.add(password); dialogBox.add(vp); dialogBox.show(); } } }); vp.add(nameField); vp.add(passWordField); vp.add(saveToStorage); vp.add(getFromStorage); RootPanel.get().add(vp); } }

总结HTML5 Storage 在 Web 应用中已经开始广泛的使用了，希望通过本文，您可以对 GWT 对 HTML5 Storage 提供了哪些支持,以及如何使用有一定的了解。GWT 从 2.3 版本已经开始对 HTML5 进行支持，关于 Canvas, Audio 和 Video 方面的内容，我们会在后续的文章中更新。如果您有建议和意见请与我们联系。