localstorage的用法详解

localstorage是HTML5新增的一种存储方式，用于存储网页本地化数据，数据会一直保存在客户端浏览器中，即使浏览器被关闭也不会被清除。它的用法非常简单，可以轻松实现web页面间的数据共享，小型的客户端存储等功能。

localstorage的属性和方法

localstorage是一种通过键值对来储存数据的机制，值是字符串类型的数据，通过setItem()来存储数据，通过getItem()来获取存储的值，通过removeItem()来移除一个键值对，通过clear()来清空所有键值对，通过key()来确认存储的数据是否存在。例如：

//存储数据
localStorage.setItem('name', '张三')
//获取数据
localStorage.getItem('name')//"张三"
//删除 name
localStorage.removeItem('name')
//清空所有
localStorage.clear()

兼容性

localstorage的兼容性非常好，很多浏览器都支持，但IE浏览器需要在IE8及以上版本才支持。

可以通过以下代码来检查浏览器是否支持localstorage：

if(typeof localStorage === 'object'){
    //浏览器支持localStorage
}else{
    alert('浏览器不支持localStorage')
}

localstorage的大小限制

localstorage是一种比Cookie更强大的客户端存储方式，但是它也有自己的局限性。localstorage的大小限制取决于具体浏览器和操作系统，一般来说，它的容量范围在5MB到10MB之间。

一般情况下，localstorage可以完全满足我们的需求，但是在一些应用中可能需要存储更多的数据，从而需要使用IndexedDB、Web SQL、File API等其他存储方式。

示例代码

下面我们来看一下如何在实现localStorage的一些相关功能。

1. 存储和读取单个数据项

//存储单个数据项
localStorage.setItem('name', '张三');
//添加后可以通过键名获取数据
localStorage.getItem('name');//"张三"

2. 存储和读取多个数据项

//存储多个数据项
localStorage.setItem('userInfo', JSON.stringify({
    'name': '张三',
    'age': 22,
    'sex': '男'
}));
//获取多个数据项
var info = JSON.parse(localStorage.getItem('userInfo'));
//现在可以通过键名获取储存的数据
console.log(info.name);//"张三"
console.log(info.age);//22
console.log(info.sex);//"男"

3. 删除数据项

//删除单个数据项
localStorage.removeItem('name');
//删除userInfo中的一个key
var info = JSON.parse(localStorage.getItem('userInfo'));
delete info.age; 
localStorage.setItem('userInfo', JSON.stringify(info));

4. 清空所有数据项

localStorage.clear();

结论

通过以上介绍可以看出，localstorage提供了一种在浏览器本地存储数据的机制，它可以轻松地将数据存到客户端浏览器中，而无需使用cookie或服务器的远程存储机制。然而，在使用localstorage时也需要注意它的相应限制，例如数据存储大小的问题和兼容性等。但是这一技术还是非常有用的，可以用于实现一些小型的客户端应用程序、数据共享、缓存等。