JS中LocalStorage与SessionStorage五种循序渐进的使用方法-前端开发

LocalStorage和SessionStorage是HTML5中提供的本地存储技术，可用于存储一些少量的数据（5-10MB左右），用于客户端浏览器处理一些无需进行服务器数据交互的场景。在JavaScript中，我们可以使用以下五种方法来使用LocalStorage和SessionStorage。

LocalStorage和SessionStorage是HTML5中提供的本地存储技术，可用于存储一些少量的数据（5-10MB左右），用于客户端浏览器处理一些无需进行服务器数据交互的场景。在JavaScript中，我们可以使用以下五种方法来使用LocalStorage和SessionStorage。

1. 存储数据

LocalStorage和SessionStorage存储数据的方式是相同的，我们可以使用setItem()方法来存储数据，语法如下：

localStorage.setItem(key, value);  //存储LocalStorage
sessionStorage.setItem(key, value); //存储SessionStorage

其中，key是存储的键，value是存储的值。存储完毕后，我们可以使用getItem()方法来获取存储数据。示例代码如下：

localStorage.setItem('username', '张三'); //存储一个用户名
sessionStorage.setItem('age', '18');      //存储一个年龄

var name = localStorage.getItem('username');
var age = sessionStorage.getItem('age');
console.log(name); //输出'张三'
console.log(age);  //输出'18'

2. 删除数据

使用removeItem()方法可以删除LocalStorage和SessionStorage中的数据，语法如下：

localStorage.removeItem(key);  //删除LocalStorage中的数据
sessionStorage.removeItem(key); //删除SessionStorage中的数据

其中，key为要删除的键。示例代码如下：

localStorage.removeItem('username'); //删除用户名
sessionStorage.removeItem('age');     //删除年龄

3. 清空数据

使用clear()方法可以清空LocalStorage和SessionStorage中的所有键值对，语法如下：

localStorage.clear();  //清空LocalStorage中的所有键值对
sessionStorage.clear(); //清空SessionStorage中的所有键值对

示例代码如下：

localStorage.setItem('name', '张三');
localStorage.setItem('age', '18');
sessionStorage.setItem('hobby', '游泳');

localStorage.clear();  //清空LocalStorage
sessionStorage.clear(); //清空SessionStorage

4. 存储JSON格式数据

LocalStorage和SessionStorage也可以存储JSON格式的数据，我们需要使用JSON.stringify()方法进行序列化，使用JSON.parse()方法进行反序列化。示例如下：

var user = {
  name: '张三',
  age: 18
};

localStorage.setItem('user', JSON.stringify(user)); //存储JSON格式的数据

var obj = JSON.parse(localStorage.getItem('user')); //获取JSON格式的数据
console.log(obj.name); //输出'张三'
console.log(obj.age);  //输出'18'

5. 存储数组格式数据

LocalStorage和SessionStorage也可以存储数组格式的数据，我们只需要使用JSON.stringify()方法进行序列化即可。示例如下：

var arr = ['苹果', '香蕉', '橙子'];

localStorage.setItem('fruit', JSON.stringify(arr)); //存储数组

var list = JSON.parse(localStorage.getItem('fruit')); //获取数组
console.log(list[0]); //输出'苹果'
console.log(list[1]); //输出'香蕉'
console.log(list[2]); //输出'橙子'