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