我们在开发网站或者网页游戏中通常需要存储用户数据,实现一些功能,比如记住密码,自动填入信息,一段时间内账号免登录等。

这些数据需要存储在浏览器中,常用的存储方式有以下几种:Local StorageSession StorageCookies

1. Local Storage

Local Storage 的值能永久的存储在浏览器上,直到手动清空浏览器数据。

同一个浏览器,同一个域名下,存储数据一直都在。

只要在相同的协议,相同的主机名,相同的端口下,就能读取/修改同一个 localStorage 对象。

数据类型是标准的键值对(key-value)。

用途:适合长期储存的数据。

示例代码(typescript 语言):

public getLocalStorage(key: string): string {
    return localStorage.getItem(key) || "";
}
public setLocalStorage(key: string, value: string) {
    localStorage.setItem(key, value);
}

2. Session Storage

Session Storage 存储特定某个会话的数据,存储数据依赖于当前窗口(当前会话)。

当前窗口关闭,数据消失;刷新当前窗口,数据不变;新打开窗口,没有数据。

只要在相同协议,相同主机名,相同端口,同一个窗口下,就能读取/修改同一个 sessionStorage 对象。

数据类型是标准的键值对(key-value)。

用途:可以用于敏感性账号的一次性登录。

示例代码(typescript 语言):

public getSessionStorage(key: string): string {
    return sessionStorage.getItem(key) || "";
}
public setSessionStorage(key: string, value: string) {
    sessionStorage.setItem(key, value);
}

3. Cookies

Cookie 存储的数据在设置的 过期时间 之前一直有效。若未设置过期时间,默认关闭浏览器失效。

cookie 是基于同一个浏览器使用。

用途:可以用于实现记住密码,自动填入信息,自动登录等功能。

示例代码(typescript 语言):

public getCookie(key: string): string {
    let name = key + "=";
    let ca = document.cookie.split(";");
    for (let index = 0; index < ca.length; index++) {
        const e = ca[index].trim();
        if (e.indexOf(name) == 0) {
            return e.substring(name.length, e.length);
        }
    }
    return "";
}
public setCookie(key: string, value: string, exdays?: number) {
    if (exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        document.cookie = `${key}=${value};expires=${d.toUTCString()}`;
    }
    else {
        document.cookie = `${key}=${value}`;
    }
}
最后修改:2021 年 11 月 16 日 10 : 39 AM
如果觉得我的文章对你有用,请随意赞赏