Το τοπικό αποθηκευτικό χώρος του HTML

Το τοπικό αποθηκευτικό χώρος του HTML: Προβάλλει τα cookies.

Τι είναι το τοπικό αποθηκευτικό χώρος του HTML;

Με τη χρήση του τοπικού αποθηκευτικού χώρου (Local Storage), οι εφαρμογές web μπορούν να αποθηκεύσουν δεδομένα τοπικά στον περιηγητή του χρήστη.

Πριν από το HTML5, τα δεδομένα των εφαρμογών μπορούσαν να αποθηκευτούν μόνο στα cookies, συμπεριλαμβανομένων των αιτημάτων του κάθε διακομιστή. Το τοπικό αποθηκευτικό χώρος είναι πιο ασφαλής και μπορεί να αποθηκεύσει μεγάλη ποσότητα δεδομένων τοπικά χωρίς να επηρεάσει την απόδοση του ιστότοπου.

Με διαφορετικό τρόπο από τα cookies, οι περιορισμοί αποθήκευσης είναι πολύ μεγαλύτεροι (τουλάχιστον 5MB) και οι πληροφορίες δεν μεταφέρονται στο διακομιστή.

Το τοπικό αποθηκευτικό χώρος διέρχεται μέσω της πηγής (origin) (μέσω τομέα και πρωτοκόλλου). Όλες οι σελίδες, από την πηγή, μπορούν να αποθηκεύσουν και να προσβούν στα ίδια δεδομένα。

浏览器支持

表格中的数组指示了完全支持本地存储的首个浏览器版本。

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

  • window.localStorage - 存储没有截止日期的数据
  • window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

Παράδειγμα

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Προσπαθήστε το προσωπικά

实例解释：

  • 创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
  • 取回 "lastname" 的值，并把它插到 id="result" 的元素中

上例也可这样写：

// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;

删除 "lastname" localStorage 项目的语法如下：

localStorage.removeItem("lastname");

注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增：

Παράδειγμα

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Έχετε κάνει κλικ στον κουμπί " +
localStorage.clickcount + " φορές.";

Προσπαθήστε το προσωπικά

Το αντικείμενο sessionStorage

Το αντικείμενο sessionStorage είναι ίσο με το αντικείμενο localStorage, με την διαφορά ότι αποθηκεύει δεδομένα μόνο για μια συνεδρία. Αν ο χρήστης κλείσει την συγκεκριμένη καρτέλα του προγράμματος περιήγησης, τα δεδομένα θα διαγραφούν.

Το παρακάτω παράδειγμα υπολογίζει τα κλικ του χρήστη στο κουμπί κατά τη διάρκεια της τρέχουσας συνεδρίας:

Παράδειγμα

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Σε αυτή τη συνεδρία, έχετε κάνει κλικ στον κουμπί " +
sessionStorage.clickcount + " φορές.";

Προσπαθήστε το προσωπικά