前端开发中，Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别

在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。

本文中，我们将会从安全性和用户体验两个方面对SessionStorage和LocalStorage进行评估。然后我们将讨论如何根据您的要求挑选合适使用的对象。

一、API的使用方式

1、localStorage：

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 删除全部
localStorage.clear();

2、sessionStorage：

// 存储数据
sessionStorage.setItem('key', 'value');

// 读取数据
sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 删除全部
sessionStorage.clear();

二、localstorage和sessionStorage的区别:

1、相同点

• 它们的储存大小都是5M;

• 它们都用于存储客户端数据；

• 它们都只能存储字符串数据；

2、不同点

生命周期不同:

• SessionStorage的生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭，那么所有通过SessionStorage存储的数据也就被清空了。

• LocalStorage的生命周期是永久，除非用户显示在浏览器提供的UI上清除LocalStorage信息，否则这些信息将永远存在。

作用域不同:

• SessionStorage数据独立于其他选项卡和窗口。如果同时打开了两个选项卡，其中一个更新了SessionStorage，则在其他选项卡和窗口中不会反映出来。

• LocalStorage可跨浏览器窗口和选项卡间共享。如果在多个选项卡和窗口中打开了一个应用程序，而一旦在其中一个选项卡或窗口中更新了LocalStorage，则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。

三、相比Cookie有如下优点

• 拥有更大的存储容量，Cookie是4k，Web Storage为5M。

• 操作数据相比Cookie更简单。

• 不会随着每次请求发送到服务端。

四、安全性

Web Storage的存储对象是独立于域名的，也就是说不同站点下的Web应用有着自己独立的存储对象，互相间是无法访问的，在这一点上SessionStorage和LocalStorage是相同的。

• 部署在http://example.com上的Web应用无法访问http://example.cn的Web Storage存储对象。

• 对于子域名也是一样，尽管http://www.example.com.cn和http://www1.example.com.cn 同属http://example.com.cn 主域下，但它们相互不能访问对方的存储对象。

• 对于针对使用http和https协议间也是不同的。也就是说http://example.com 与https://example.com 也是相互隔离。