window.localstorage的增删改查_window.localstorage.remove-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45201775/article/details/105424545

本文详细介绍了如何在浏览器中使用window.localStorage进行数据的存储与读取。包括数据类型的转换、增删改查操作，以及如何处理复杂数据结构的存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

希望大家开开心心

window.localstorage增删改查

window.localstorage 只支String类型的数据，所以在存值和取值时需要进行转换

使用之前需要查看判断一下浏览器是否支持window.localstorage

if (window.localStorage) {
            alert('浏览器支持localstorage');
            return false;
        } else {
            // 其他操作
        }

新增，查

转换为String类型使用JSON.stringify

取值的时候用JSON.parse接受

const a = [1, 2, 3];
// 存值 aa 为存的key a为value
window.localStorage.setItem('aa', JSON.stringify(a));
const b = JSON.parse(window.localStorage.getItem('aa'));
console.log('bbbbbbbbbbb', b); // 结果为[1,2,3]

删除

window.localStorage.removeItem('aa');
const c = JSON.parse(window.localStorage.getItem('aa'));
console.log('cccccccc', c); // 结果为null

改

如果是直接把整个值变调就再存一遍行了，会覆盖以前存的值

window.localStorage.setItem('aa', JSON.stringify(b));
console.log('aaa', JSON.parse(window.localStorage.getItem('aa'))); // 结果为[4,5,6]

如果希望可以向原有的数据中进行增加或者删除和其他的操作因为没有提供快捷方法我们可以先取出来然后对其进行操作，最后再存进去，有些麻烦，如果有别的快捷方法希望大佬们指点

const b = 4;
const cc = JSON.parse(window.localStorage.getItem('aa'));
cc.push(b);
window.localStorage.setItem('aa', JSON.stringify(cc));
console.log('aa', JSON.parse(window.localStorage.getItem('aa'))); // [1,2,3,4]