HTML5 Web 存储（localStorage和sessionStorage）

Love The Way You Lie 2021-12-01 13:26 272阅读 0赞

[原文链接][Link 1]

HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。

### localStorage ###

> localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

// 1、保存数据到本地 
       // 第一个参数是保存的变量名，第二个是赋给变量的值 
       localStorage.setItem( 'Author', 'local'); 
       // 2、从本地存储获取数据 
       localStorage.getItem( 'Author'); 
       // 3、从本地存储删除某个已保存的数据 
       localStorage.removeItem( 'Author'); 
       // 4、清除所有保存的数据 
       localStorage.clear();

### ![70][] ###

### sessionStorage ###

> sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

// 1、保存数据到本地 
       // 第一个参数是保存的变量名，第二个是赋给变量的值 
       sessionStorage.setItem( 'Author', 'session'); 
       // 2、从本地存储获取数据 
       sessionStorage.getItem( 'Author'); 
       // 3、从本地存储删除某个已保存的数据 
       sessionStorage.removeItem( 'Author'); 
       // 4、清除所有保存的数据 
       sessionStorage.clear();

![70 1][]

### 复杂数据存储 ###

上面都是对于简单的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，直接存储是不行的

错误的存储：

var user = { 
       username: 'liu', 
       password: '123456' 
       }; 
       sessionStorage.setItem( 'user', user); 
       console.log(sessionStorage.getItem( 'user'));

![70 2][]

这个时候，就需要转换数据格式。

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象

var user = { 
       username: 'liu', 
       password: '123456' 
       }; 
       user = JSON.stringify(user); 
       sessionStorage.setItem( 'user', user); 
       var account = sessionStorage.getItem( 'user'); 
       console.log(account); 
       account = JSON.parse(account) 
       console.log(account);

![70 3][]

![70 4][]

[Link 1]: https://blog.csdn.net/sleepwalker_1992/article/details/82832123
[70]: /images/20211201/d709788dcc0f4286accdaa54ada14264.png
[70 1]: /images/20211201/6f6e0619baf7414490990b85266f59db.png
[70 2]: /images/20211201/d49d507215cd45ba8c2363e53bb951d8.png
[70 3]: /images/20211201/b858e32cc8ec4723b9cab69f6aae6a1b.png
[70 4]: /images/20211201/58178305ee17480596bcb29e8dc2b391.png