TypeScript 浏览器存储数据的方式
我们在开发网站或者网页游戏中通常需要存储用户数据，实现一些功能，比如记住密码，自动填入信息，一段时间内账号免登录等。
这些数据需要存储在浏览器中，常用的存储方式有以下几种：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}`; } }
作者：机灵鹤
链接：https://juejin.cn/post/7030991065440075813