Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of mobile web application local storage. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Here, you will use the latest Web technology to develop Web applications. Most of the code here is just HTML,JavaScript and CSS-the core technology of any Web developer. The most important thing you need is the browser used to test the code. Most of the code in this article will run on the latest desktop browsers, with exceptions pointed out. Of course, you must also test it on mobile browsers, and you certainly want the latest iPhone and Android SDK to support this code. IPhone SDK 3.1.3 and Android SDK 2.1 are used.

Local storage base

Web developers have been trying to store data on it. HTTPcookie is abused for this purpose. Developers compress large amounts of data into the 4KB assigned by the HTTP specification. The reason is simple. For a variety of reasons, Web applications need to store data between each other, and it is often inefficient, insecure, or inappropriate to store that data on the server. Over the years, there have been many alternatives to this problem. Various browsers have been dating proprietary storage API. Developers also take advantage of the extended storage capabilities in Flash Player (implemented through JavaScript). Similarly, Google creates Gears plug-ins for various browsers, and it contains storage API. Not surprisingly, some JavaScript libraries try to smooth out these differences. In other words, these libraries provide a simple API, and then check what storage capabilities are available (perhaps a proprietary browser API or a plug-in such as Flash).

Fortunately for Web developers, the HTML 5 specification eventually includes a standard for local storage and is implemented by a wide range of browsers. In fact, the standard is an adoptable standard and is supported in the latest versions of all major browsers: Microsoft ®, InternetExplorer ®, Mozilla Firefox,Opera,Apple Safari and Google Chrome. More importantly for mobile developers, it is supported in WebKit-based browsers (such as iPhone and mobile phones that use Android (version 2.0 or later), as well as other mobile browsers (such as Mozilla's Fennec). With that in mind, let's look at this API.

Storage API

LocalStorage API is very simple. In fact, it implements the DOM Storage interface according to the HTML 5 specification. On the contrary, HTML 5 specifies two different objects to implement the interface: localStorage and sessionStorage. The sessionStorage object is a storage implementation of data that is stored only during the session. More precisely, browsers can delete sessionStorage data as long as there is no script running that can access sessionStorage. This is the opposite of localStorage, multiple cross-user sessions. Two objects share the same API, so I'll just focus on localStorage.

Storage API is a classic name / value pair data structure. The most common methods you will use are getItem (name) and setItem (name,value). These methods are exactly what you would expect: getItem returns the value associated with the name, or null if nothing exists, while setItem adds the name / value pair to the localStorage or replaces the existing value. There is also a removeItem (name), which, as the name implies, removes a name / value pair from localStorage (otherwise do nothing if it exists). Finally, for inheritance on all name / value pairs, there are two API. One is the length attribute, which is getting the total number of stored name / value pairs. Correspondingly, a key (index) method returns a name from all the names used in the store.

With these simple API, you can accomplish a lot of tasks, some of which are about personalizing or tracking user behavior. These can be said to be important use cases for mobile Web developers, but there is a more important use case: caching. With localStorage, this frees you from waiting for potentially slow server throughput and minimizes the need for data on the server. Now let's look at an example that demonstrates how to use localStorage to get this cache.

Example: caching using local storage

This example builds on the partial examples in part 1 of this series, when you first started t0 development. That example shows how to perform a local search for Twitter by using geolocation API to get the location of the user. Starting with that example, simplify it and greatly improve its performance. First, simplify that example to a Twitter search without location. Listing 1 shows a simplified Twitter search application.

Listing 1. The most basic Twitter search

XML / HTML code copies content to text

< html >

< meta http-equiv = " Content-Type"内容= " text / html; charset = UTF-8" >

< meta name = " viewport" content = "宽度=设备宽度" />

< title >

Basic Twitter search

Function searchTwitter () {

VAR query = "http://search.twitter.com/search. JS? callback

= showResults & Q = "

Query + = $("kwBox"). Value

Var script = document .createElement ("script")

Script.src = query

Document.getElementsByTagName ("head") [0] .appendChild (script)

}

/ / remove ui code for brevity

Function showResults (response) {

Var tweets = response .results

Tweets.forEach (function (tweet) {

Tweet.linkUrl = "http://twitter.com/" + tweet.from_user"

+ "/ status /" + tweet.id

})

MakeResultsTable (tweets)

}

< div id = " main" >

Search for Twitter:

< div id = "结果" >

In this application, Twitter search API support for JSONP is used. When the user submits the search, a script tag is dynamically added to the page and the name of the corresponding function is specified to make an API call. This allows you to make a cross-domain call from the Web page. Call the return immediately, and call it (display the result) and it will be called. You add a link to each tweet returned by Twitter, and then create a simple table to use to display these tweet. To speed up, you can cache the results from the search query, and then use these cached results each time the user submits the query. First, let's look at how to use localStorage to store tweet locally.

Save locally

Basic Twitter search can search Twitter search API provides a set of tweet. If you can save these tweet locally, then they are associated with the generated keyword search, and you have a useful cache. To save the tweet, you only need to modify the callback function that will be called when the call to the Twitter search API returns. Listing 2 shows the modified function.

Listing 2. Search and Save

The JavaScript code copies the content to

Function searchTwitter () {

Var keyword = $("kwBox"). Value

Var query = "http://search.twitter.com/search.json?callback

= processResults&q = "

Query + = keyword

Var script = document.createElement ("script")

Script.src = query

Document.getElementsByTagName ("head") [0] .appendChild (script)

}

Function processResults (response) {

Var keyword = $("kwBox"). Value

Var tweets = response.results

Tweets.forEach (tweet) {

SaveTweet (keyword,tweet)

Tweet.linkUrl = "http://twitter.com/" + tweet.from_user +" / status / "+ tweet.id

})

MakeResultsTable ()

AddTweetsToResultsTable (tweets)

}

Function saveTweet (keyword,tweet) {

/ / check whether the browser supports localStorage

If (! Window.localStorage) {

Return

}

If (! LocalStorage.getItem ("tweet" + tweet.id)) {

LocalStorage.setItem ("tweet" + tweet.id,JSON.stringify (tweet))

}

Var index = localStorage.getItem ("index::" + keyword)

If (index) {

Index = JSON.parse (index)

} other {

Index = []

}

If (! Index.contains (tweet.id)) {

Index.push (tweet.id)

LocalStorage.setItem ("index::" + keyword, JSON.stringify (index))

}

}

Start with the first function, searchTwitter. This is called when the user submits the search. The only thing you focus on relative to listing 1 is the callback function. Not only do you display them when tweet returns, you also need to process them (in addition to displaying, you also need to save them). Therefore, you specify a new callback function processResults. You call saveTweet for each tweet. You also pass keywords that are used to generate search results. This is because you want to associate these tweet with the keyword.

In the saveTweet function, check first to make sure that localStorage is really supported by the browser. As mentioned earlier, localStorage is widely supported in both desktop and mobile browsers, but it's always a good idea to check when using this new feature. If it is not supported, you simply return from the function. It doesn't seem to save anything, but it doesn't report an error-the application just doesn't have a cache in this case. If the localStorage is supported, then check first to see if the tweet has been stored. If there is no storage, use setItem to store it locally. Then, an index object corresponding to the keyword is retrieved. This is just the ID of the tweet associated with the keyword. If tweet ID is not already part of the index, add it and update the index.

Notice that you used JSON.stringify and JSON.parse when saving and loading JSON in listing 3. The JSON object (or, more simply, window.JSON) is part of the HTML 5 specification as a native object that always exists. The stringify method converts any JavaScript object into a serialized string, while the parse method does the opposite, restoring the JavaScript object from the serialized serial representation. This is necessary because localStorage only stores but native JSON objects are not widely implemented as localStorage. For example, it does not appear on the latest Mobile Safari browser in iPhone (version 3.1.3 at the time of this writing). It is supported on the latest Android browsers. You can easily check to see if it is there, and if not, load another JavaScript file. You can get the same JSON objects used natively by visiting the json.org Web site (see Resources). To view these locally, figure 1 shows some cached tweets that are stored locally and viewed using Chrome's developer tools.

Figure 1. Local cached tweet

Screenshot of the entire locally cached tweet (with Key and Value subdivision)

Both Chrome and Safari have built-in developer tools that can be used to view any data saved in localStorage. This is useful for debugging applications that use localStorage. It displays locally stored key / value pairs in plain text. Now that you've started saving tweets from Twitter's search API, brake them can be used as a cache, so you just need to start reading them from localStorage. Let's see how this is done.

Fast local data loading

In listing 2, you see some examples of reading data from localStorage using the getItem method. Now when a user submits a search, you can check for cache hits and load the cached results immediately. Of course, you will still query against the Twitter search API, because people keep generating tweet and adding it to the search results. However, by looking for results that are not yet in the cache, you also have a way to make the query more efficient. Listing 3 shows the updated search code.

Listing 3. First do a local search.

The JavaScript code copies the content to

Function searchTwitter () {

If ($("resultsTable")) {

$("resultsTable") [xss_clean] = ""; / / clear the result

}

MakeResultsTable ()

Var keyword = $("kwBox"). Value

Var maxId = loadLocal (keyword)

Var query = "http://search.twitter.com/search.json?callback=processResults&q="

Query + = keyword

If (maxId) {

Query + = "& since_id =" + maxId

}

Var script = document.createElement ("script")

Script.src = query

Document.getElementsByTagName ("head") [0] .appendChild (script)

}

Function loadLocal (keyword) {

If (! Window.localStorage) {

Return

}

Var index = localStorage.getItem ("index::" + keyword)

Var tweets = []

Var I = 0

Var tweet = {}

If (index) {

Index = JSON.parse (index)

For (I = 0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.