¿Qué cuestiones deben tenerse en cuenta al volver a encapsular un gancho loaclStorage?
- Preste atención a los nombres para evitar la contaminación.
Por ejemplo, actualmente tengo dos subproyectos bajo un nombre de dominio:
Proyecto A y Proyecto
B
, y ambos proyectos necesitan almacenar información de usuario. Entonces, ¿cómo puedo evitar que estos dos conjuntos de datos se contaminen entre sí? ¿otro? Por lo tanto, debe prestar atención al nombre y agregar el prefijo del nombre del proyecto correspondiente u otro identificador al almacenar para garantizar que este conjunto de datos sea único.
const PROJECT_NAME = 'test-project'
localStorage.setItem(
`${
PROJECT_NAME}_userInfo`,
JSON.stringify({
name: 'lsx' })
)
- Preste atención a las versiones y evite iteraciones.
Mire un ejemplo. Si almacenamos un dato, el tipo es cadena.
// 存数据
const set = () => {
const info = get()
if (!info) {
localStorage.setItem(
`${
PROJECT_NAME}_info`,
'info_string'
)
}
}
// 取数据
const get = () => {
const info = localStorage.getItem(
`${
PROJECT_NAME}_info`
)
return info
}
Luego se lanzó el proyecto por un tiempo, pero en ese momento de repente se decidió cambiar al tipo de objeto, en ese momento también cambió el método de acceso correspondiente.
// 存数据
const set = () => {
const info = get()
if (!info) {
localStorage.setItem(
`${
PROJECT_NAME}_info`,
JSON.stringify({
name: 'lsx' })
)
}
}
// 取数据
const get = () => {
const info = localStorage.getItem(
`${
PROJECT_NAME}_info`
)
return JSON.parse(info)
}
Pero esto en realidad tiene peligros ocultos, porque el proyecto ha estado en línea por un tiempo y algunos usuarios ya han guardado estos datos y los datos se almacenan en tipo de cadena. Sin embargo, después de que la nueva versión esté en línea, se utiliza el método del objeto para recuperar los datos. Esto hará que JSON.parse (cadena) informe un error, lo que afectará la lógica empresarial normal ~
Por lo tanto, es mejor agregar un número de versión o hacer compatibilidad de errores para evitarlo ~
const PROJECT_NAME = 'test-project'
// 每次升级时改变版本号，规则自己定
const VERSION = 1
// 存数据
localStorage.setItem(
`${
PROJECT_NAME}_userInfo_${
VERSION}`,
JSON.stringify({
name: 'lsx' })
)
// 取数据
localStorage.getItem(
`${
PROJECT_NAME}_userInfo_${
VERSION}`
)
3. Puntualidad y privacidad
Puntualidad significa agregar una puntualidad a los datos almacenados. Después de cierto tiempo, los datos se vuelven oportunos. El método consiste en agregar una marca de tiempo cada vez que se guardan los datos.
// 原来
localStorage.setItem(
`${
PROJECT_NAME}_userInfo`,
JSON.stringify({
name: 'lsx' })
)
const TIME_OUT = 3 * 60 * 60 * 1000
// 加时间戳
localStorage.setItem(
`${
PROJECT_NAME}_userInfo`,
JSON.stringify({
data: {
name: 'lsx' },
// 记录当前时间
time: new Date().getTime()
})
)
// 取数据时判断时间戳
const get = () => {
let info = localStorage.getItem(
`${
PROJECT_NAME}_userInfo_${
VERSION}`
)
info = JSON.parse(info)
const now = new Date().getTime()
if (now - info.time >= TIME_OUT) {
localStorage.removeItem(
`${
PROJECT_NAME}_userInfo_${
VERSION}`
)
return null
}
return info
}
Hay algunos datos que tenemos que almacenar en el almacenamiento local, pero no queremos que los usuarios los vean. En este momento, debemos cifrarlos (las reglas de cifrado las determinamos nosotros mismos).
// 加密函数
const encrypt = (v) => {
}
// 解密函数
const decrypt = (v) => {
}
// 存数据
localStorage.setItem(
`${
PROJECT_NAME}_userInfo_${
VERSION}`,
// 加密
encrypt(JSON.stringify({
name: 'lsx' }))
)
// 取数据 解密
decrypt(localStorage.getItem(
`${
PROJECT_NAME}_userInfo_${
VERSION}`
))
4. Compatible con SSR
SSR es la representación del lado del servidor. Ejecuta el código en el lado del servidor, lo une en una página y lo envía al navegador para su visualización. Por lo tanto, localStorage no se puede usar en el lado del servidor porque no es un entorno del navegador, por lo que está encapsulado. Un almacenamiento local más general, que debe tener en cuenta la situación de SSR.
// 在 SSR 中使用对象替代 localStorage
const SSRStorage = {
map: {
},
setItem(v) {
this.map[key] = v
},
getItem(key) {
return this.map[key]
}
}
let storage = null
// 判断环境
if (!window) {
storage = SSRStorage
} else {
storage = window.localStorage
}
Fuente del artículo: Maestro de front-end