突袭HTML5之Javascript API扩展3—本地存储全新体验

什么是本地存储

本地存储是 HTML5 新增的一个功能，可以让我们在客户端本地浏览器中存储数据，而无需借助服务器实现存储，该技术包含 localStorage 和 sessionStorage 两种技术。

localStorage 和 sessionStorage 的不同之处在于 localStorage 存储的数据没有过期时间，而 sessionStorage 存储的数据只在一个会话期间内有效。

localStorage

localStorage 可以直接在本地存储数据，并且在浏览器重新打开后依然有效。

使用示例

存储数据

localStorage.setItem('name', 'John Doe');
localStorage.setItem('age', '28');

获取数据

let name = localStorage.getItem('name');
let age = localStorage.getItem('age');

删除数据

localStorage.removeItem('name');
localStorage.clear();    // 清空所有数据

sessionStorage

sessionStorage 的数据只在一个会话期间内有效，浏览器关闭后数据消失。

使用示例

存储数据

sessionStorage.setItem('name', 'John Doe');
sessionStorage.setItem('age', '28');

获取数据

let name = sessionStorage.getItem('name');
let age = sessionStorage.getItem('age');

删除数据

sessionStorage.removeItem('name');
sessionStorage.clear();    // 清空所有数据

可以使用try-catch解决浏览器不支持localStorage和sessionStorage的情况

在某些情况下，浏览器可能不支持 localStorage 和 sessionStorage，可以使用try-catch解决该问题。

let storage;
try {
    storage = localStorage;
    storage.setItem('test', 'test');
    storage.removeItem('test');
} catch (e) {
    storage = {
        getItem: function (key) {
            let value = null;
            try {
                value = sessionStorage.getItem(key);
            } catch (e) { }
            return value;
        },
        setItem: function (key, value) {
            try {
                sessionStorage.setItem(key, value);
            } catch (e) { }
        },
        removeItem: function (key) {
            try {
                sessionStorage.removeItem(key);
            } catch (e) { }
        }
    };
}

总结

本文主要介绍了 HTML5 中的本地存储技术 localStorage 和 sessionStorage，它们可以在客户端本地存储数据而无需借助服务器，大大提高了网站的响应速度和用户体验。在使用时，需要注意浏览器兼容性和数据的有效期。