Having fun with HTML5 — Local Storage and Session Storage
API
The full API specification for the localStorage and sessionStorage objects can be found here. At the time of writing, this is how the common Storage interface look:
Demo
I’ve put together a quick demo here to illustrate how to detect and use the local and session storage to get, set, remove and clear stored items (well, basically, covers each of the available methods on the Storage interface above).
The page itself is simple and crude, just a couple of <div> and most importantly two tables which I use to show all the key value pairs stored in the local and session storage:
Introducing the new placeholder attribute
You might have noticed that the two text boxes had placeholder text similar to that familiar search box in Firefox:
This is done using HTML5’s placeholder attribute for the <input> tag:
|
1
2 |
<input id="keyText" placeholder="Enter
key"/><input id="valueText" placeholder="Enter
value"/> |
Nice and easy, eh? 
Setting an item
To add a new key value pair or update the value associated with an existing key, you just have to call the setItem method on the intended storage object:
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
// adds a
new key to both local and session storagefunction setKey()
{
var key
= $("#keyText").val();
var value = $("#valueText").val();
if (Modernizr.localstorage) {
localStorage.setItem(key,
value);
}
if (Modernizr.sessionstorage) {
sessionStorage.setItem(key,
value);
}
showKeys();} |
Removing an item
Earlier in the showStorageKeys(type, table) function, I added a row to the relevant table for each key value pair in the storage including a button with a handler for the onclick event. The handlers are created with the correct storage type (“local” or “session”) and key for the current row baked in already so that they will call the removeItem(type, key) function with the correct parameters:
|
1
2
3
4
5
6
7 |
// removes
an item with the specified key from the specified type of storagefunction removeItem(type, key) {
// get the specified type of storage, i.e.
local or session
var storage = window[type + 'Storage'];
storage.removeItem(key);
showKeys();} |
Clearing all items
Finally, the ’”Clear” buttons underneath the tables call the clearLocalKeys() and clearSessionKeys() function to remove all the key value pairs in the corresponding storage:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
function clearLocalKeys() {
clearKeys("local");}function clearSessionKeys() {
clearKeys("session");}// clear
all the held keys in the specified type of storagefunction clearKeys(type) {
// get the specified type of storage, i.e.
local or session
var storage = window[type + 'Storage'];
// clear the keys
storage.clear();
showKeys();} |
'프로그래밍 > Web' 카테고리의 다른 글
| [WEB] http://www.asciiflow.com/ - Ascii Flow Diagram (0) | 2011.06.21 |
|---|---|
| [Web] http://jsonlint.com/ - JSON 데이터 인증하기. (0) | 2011.06.20 |
| [AJAX] External URL 의 내용 불러오기- 외부URL (0) | 2011.05.26 |
| [web] html5 chart - powercharts - fusion chart 차트 그래프 (0) | 2011.04.19 |
| 모바일웹 .vs 앱 비교정리 (0) | 2011.04.14 |
Powerful diagramming tool for network diagrams & process flow diagrams
Tabular representation of complex data with user-defined color ranges
Advanced line chart with multiple axes for comparing multiple parameters
Highly interactive chart for plotting stock data and commodity prices
Shows the cumulative effect of positive and negative values on an initial value
Offers visual modification of the plotted data simply by dragging the data plots
Modern method for displaying hierarchical relationships
Display the spread of a batch of data using median, quartiles, limits, mean and deviations
For plotting very large and very small values on the same chart on a logarithmic scale
Effective tool for comparing multiple entities based on different features
Similar to a line chart except that it draws a fitted curve through the data points
Specialized line chart with vertical and horizontal lines to connect data points
Scatter Chart where data points can be visually selected & processed
Plot data on an inverted scale, like ranks and race timings
Shows the extent of possible error (or deviation) in data using I-shaped bars
For noise free analysis of equity/commodity prices