js本地缓存localStorage增删改查

在JavaScript中可以通过localStorage对象来获取和设置本地存储的数据。

设置本地存储数据的方法:


// 设置单个值
localStorage.setItem('key', 'value');

// 一次设置多个值
localStorage.setItem('test', JSON.stringify({a: 1, b: 2}));

需要注意的是,localStorage只支持存储字符串格式的数据。所以对象和数组需要用JSON.stringify()序列化为JSON字符串后再存储:


let user = {name:'John', age:20};

// 序列化对象为JSON字符串
localStorage.setItem('user', JSON.stringify(user)); 

// 存储数组
localStorage.setItem('hobbies', JSON.stringify(['music', 'sports']) );

获取时再用JSON.parse()解析为对象或数组即可。

移除本地存储数据:

localStorage.removeItem('key');

注意localStorage存储的数据只能是字符串格式,对象需要序列化后存储。

获取本地存储数据的方法:

1. 获取指定键的值:

let value = localStorage.getItem('key');

2. 获取所有键值对:

let items = {};
for(let i=0; i<localStorage.length; i++) {
 let key = localStorage.key(i);
 items[key] = localStorage.getItem(key); 
}

3. 直接访问localStorage对象:


let user = localStorage.user;

获取本地存储数据后需要判断是否存在,并解析字符串转换为对象,才能使用数据。如果在localStorage中存储的是JSON格式的数据,获取时需要进行JSON.parse解析: 例如本地存储的值是:

localStorage.setItem('user', '{"name":"John","age":20}');

获取时可以这样:

let userText = localStorage.getItem('user');
let user = JSON.parse(userText);

console.log(user.name); // John

或者直接获取后解析:



let user = JSON.parse(localStorage.getItem('user'));

console.log(user.age); // 20

这种方式可以方便地在localStorage中存储和获取对象或数组的数据。

设置本地存储数据的方法:

移除本地存储数据:

获取本地存储数据的方法:

读者评论