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

这些数据需要存储在浏览器中，常用的存储方式有以下几种：Local Storage、Session Storage、Cookies 。

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}`;
    }
}