01/07/2013
0
HTML5 đang là một xu hướng kĩ thuật rất được ưa chuộng do nó tăng lực cho các trình duyệt hiện đại với tính năng lưu trữ không giới hạn lên ổ đĩa cứng của máy tính khách truy cập.
Đây thực sự là một tính năng cực kì hữu ích, và được rất nhiều ứng dụng nền tảng web sử dụng mà bạn đã từng nghe nói rất nhiều nhưng ít khi hình dung được: đó là các ứng dụng văn phòng trực tuyến, trình duyệt thư điện tử của Google, Microsoft,... có thể cho phép bạn làm việc ngoại tuyến sau đó đồng bộ lên máy chủ ngay khi có kết nối Internet.
Thực chất, giải pháp này chỉ là một API JavaScript được gọi là localStorage. Trong bài viết này, chúng ta sẽ nghiên cứu về nó.
- Demo
- Phóng to
- Tải lại
- Cửa sổ mới
Miễn phí web hosting 1 năm đầu tại iPage
Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?
Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.
Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
---
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!
bởi Xem- Lượt gửi (0)
- Mới
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản
chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn
Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn
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 trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ
Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ
Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program
Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn
Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI
chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn
Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn
Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ
GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án
iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới
Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la
Cool Domains for Sale!
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:
CSS Menu Maker [more]
18,935
0
0
0
0.15 KBytes
0 lượt đánh giá / 18,935 lượt xem / 0 lời bình
01/07/2013
HTML5 đang là một xu hướng kĩ thuật rất được ưa chuộng do nó tăng lực cho các ...HTML5 localStorage: Tìm hiểu cơ bản - HTML5 localStorage: Tìm hiểu cơ bản - Ngôn ngữ: tiếng Việt
