极客教程LocalStorage.clear的使用
什么是LocalStorage？
LocalStorage是一个简单的用于存储键值对的API。该API允许将字符串键值对保存到一个特定域名下，存储的键值对不会过期，可以长期使用。LocalStorage拥有一些优点，主要包括：
- 可以一定程度上代替服务器存储。
- 可以在不同的浏览器窗口和标签页之间共享数据。
- 可以在不同的浏览器和电脑之间进行数据同步。
LocalStorage的缺点是容量有限，大概只有5~10MB。
在Javascript中，LocalStorage是以window.localStorage对象的形式存在的。
LocalStorage的基本使用
LocalStorage使用键值对的方式存储数据，与Javascript中的对象类似。下面是一个最基本的LocalStorage的使用示例代码：
localStorage.setItem('username', 'Tom');
localStorage.getItem('username');
localStorage.removeItem('username');
可以看到，LocalStorage主要有三个方法：setItem方法用于将一个键值对保存到LocalStorage中；getItem方法用于获取LocalStorage中对应键的值；removeItem方法用于从LocalStorage中删除一个键值对。
下面是上述示例代码的执行结果：
保存 "username" 的值 "Tom"
获取存储的值 "Tom"
从LocalStorage中删除 "username" 键值对
LocalStorage的高级使用
在LocalStorage中，数据类型是有限的，只支持字符串类型。因此，如果要存储复杂数据类型，需要对其进行序列化操作。通常，我们使用JSON.stringify方法对数据进行序列化，然后使用JSON.parse方法将其反序列化。下面是一个LocalStorage嵌套对象的例子：
let user = {
name: 'Tom',
age: 20
};
localStorage.setItem('user', JSON.stringify(user));
let userJson = localStorage.getItem('user');
let userObj = JSON.parse(userJson);
console.log(userObj.name);
console.log(userObj.age);
可以看到，这里将一个对象序列化之后保存到了LocalStorage中，之后再从LocalStorage中获取这个对象并进行反序列化。最终结果会输出：
Tom
20
LocalStorage也支持使用数组进行存储：
let fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', JSON.stringify(fruits));
let fruitsJson = localStorage.getItem('fruits');
let fruitsArr = JSON.parse(fruitsJson);
console.log(fruitsArr);
可以看到，这里将一个数组保存到LocalStorage中，之后再获取这个数组并进行反序列化。最终结果输出：
["apple", "banana", "orange"]
LocalStorage还可以增加事件监听器，可以用于监听LocalStorage内容的变化：
window.addEventListener('storage', function(e) {
console.log('key: ' + e.key + '，oldValue: ' + e.oldValue + '，newValue: ' + e.newValue);
}, false);
这个监听器可以监听所有LocalStorage的事件。当LocalStorage中的数据发生改变时，会触发这个监听器，并输出相应的信息。
LocalStorage的清除与检测
LocalStorage提供了一个clear方法，用于清除LocalStorage中的所有键值对。下面是一个清除LocalStorage的例子：
localStorage.clear();
可以看到，这里使用clear方法清除了LocalStorage中的所有数据。
LocalStorage也可以用于检测是否支持LocalStorage。通过判断window对象中是否有localStorage属性来实现：
if(window.localStorage) {
console.log('浏览器支持LocalStorage！');
} else {
console.log('浏览器不支持LocalStorage！');
}
结论
LocalStorage是一个非常简单、易用的存储API，适用于在浏览器端长期存储应用数据。LocalStorage在存储数据方面有一些限制，但可以通过序列化来实现复杂数据的存储。清除LocalStorage可以使用clear方法，检测LocalStorage支持可以通过判断window.localStorage属性是否存在来实现。正确认识LocalStorage的使用方法，可以帮助我们更好地使用浏览器存储应用数据。