01/07/2013
0
HTML5 is a new hot technology that adds a new feature to modern browsers which allows them to store a certain amount of website data locally on someone's computer. This hot solution comes in handy with some of the recent "web apps" that might, for example, save your drafts or states even when disconnecting from the Internet, such as Microsoft Office online apps but may allow you to work offline, GMail offline, etc.
In fact, this solution is a JavaScript API known as localStorage, and in this HTML5 tutorial, we'll be covering some of the HTML5 localStorage basics and how it works.
Some other HTML5 related tutorials you should read:
- HTML5 Web Workers Multithreading in JavaScript
- Design Better HTML5 Form Element Validator
- JavaScript Image Rotation script with CANVAS in HTML5
- Processing Local Files in JavaScript with HTML5
- JavaScript Caching in HTML5
- Awesome Canvas Drawer with HTML5
- Demo
- Enlarge
- Reload
- New window
Free iPage Web Hosting for First Year NOW
If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?
Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
---
The API
Let's clear up some of the ideas around localStorage. You might be aware of "cookies", which sites use to remember you or your login. Cookies are very limited in size, and really aren't meant to store actual data. localStorage, on the other hand, is meant for sites to have a 5-10MB space on your PC to save whatever they may need. This storage is NOT sent to the server, in contrast to cookies. This means all data stored with localStorage is kept on that one computer, and only accessible by the browser you used to create the data. Every modern browser supports this, so let's look into the code (Javascript knowledge is needed):
You can access localStorage with window.localStorage. If you type that into a console, you'll probably see that the current site you call it from isn't using it.
The way localStorage actually stores its data is with string key/value pairs. You either set or get the values by their key string. For example, I might add a key named "user", and set its value to "John": window.localStorage.setItem('user','John'). Now if you call window.localStorage you'll see you have 1 item.
Now that you've set an item, you can also get it's value by calling it by its string: window.localStorage.getItem('user')
One more method to add to these localStorage basics would be window.localStorage.clear(), which as you might guess, clears out everything in localStorage.
Simple Site
So far everything seems pretty simple, right? Let's see a simple, real world example of how we can use this. Let's make a small notepad type app, that will store everything we type into it, into our localStorage. Let's set up some quick markup first:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>localStorage Notepad</title>
<style type="text/css">
body {
background: #ABC;
font-family: Helvetica, Arial, sans-serif;
}
.notepad {
background: #FAFAFA;
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
min-height: 400px;
margin: 0 auto;
padding: 20px;
width: 440px;
}
</style>
</head>
<body>
<div class="notepad" contentEditable="true"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js "></script>
<script>
$( function() {
//Stuff to come
});
</script>
</body>
</html>Which would give us a page like so:
You might notice at the end I decided to use Zepto.js from a CDN, basically I'm just using it to slim down on the Javascript we have to write. Anyway, you'll notice that at the moment all we have is a div that you can type into, but that's about it. Once you refresh the page, the notepad is blank once again. Let's plug in some localStorage magic!
Store it!
<script>
$( function() {
// Set some variables
var ls = window.localStorage
// Save text
$('.notepad').blur( function() {
ls.setItem('data', $('.notepad').text() );
});
});
</script>You'll see we've added some extra stuff to our Javascript. Zepto acts just like jQuery for the most part, so upon initialization we first set an alias to window.localStorage, that way we can just use ls instead of window.localStorage typing out over and over. The next thing we do is a bind a function to the blur event (i.e. when you remove focus) of the .notepad div. In this case, we want the page to save the text that it contains whenever we remove focus from the pad. Now you can call window.localStorage after you type new text and see that it's being saved locally!
Read it too
Great, we've added saving to our notepad app, but if you refresh the notepad is still blank like before. However, if you call window.localStorage in a console, you will see that the saved text still exists. All we need to do is add a little more JS to retrieve any saved data and apply it on load!
<script>
$( function() {
// Set some variables
var ls = window.localStorage
// Check for local data, then apply
if (ls.getItem('data')) {
$('.notepad').text(ls.getItem('data'));
}
// Save text
$('.notepad').blur( function() {
ls.setItem('data', $('.notepad').text() );
});
});
</script>With that middle section, you'll see we first check for the existence of any saved text (excluding line breaks) under the "data" key, and if so, apply it to the notepad div. With that, you now have a super simple notepad app using some localStorage basics!
by Preview- Sent (0)
- New
Generate your business videos by AI with voice or just text
chatGPTaz.com
Talk to ChatGPT by your mother language
AppAIVideo
Your first FREE AI Video App
Deepfake Video
Deepfake AI Video Maker
Deepfake
Deepfake AI Video Maker
AI Deep Fake
Deepfake AI Video Maker
AIvidio
AI Video Mobile Solutions
AIvideos
AI Video Platform & Solutions
AIvedio
AI Video App Maker
Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE
Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE
Temu Free $500 for New Users
Claim Free Temu $500 Credit via Affiliate & Influencer Program
Free TikTok Ads Credit
Master TikTok Ads for Your Business Marketing
Dall-E-OpenAI.com
Generate creative images automatically with AI
chatGPT4.win
Talk to ChatGPT by your mother language
First AI Product from Elon Musk - Grok/UN.com
Speak to Grok AI Chatbot with Your Language
Tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
iPhoneKer.com
Save up to 630$ when buy new iPhone 16
Buy Tesla Optimus Robot
Order Your Tesla Bot: Optimus Gen 2 Robot Today for less than $20k
Cool Domains for Sale!
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:
CSS Menu Maker [more]
18,934
0
0
0
0.15 KBytes
0 votes / 18,934 previews / 0 comment
01/07/2013
HTML5 is a new hot technology that adds a new feature to modern brows...HTML5 localStorage: Tutorial and Basics - HTML5 localStorage: Tutorial and Basics - Language: English
