在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。
本文中，我们将会从安全性和用户体验两个方面对SessionStorage和LocalStorage进行评估。然后我们将讨论如何根据您的要求挑选合适使用的对象。
一、API的使用方式
Storage_7">1、localStorage：
// 存储数据
localStorage.setItem('key', 'value');
// 读取数据
localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 删除全部
localStorage.clear();
Storage_25">2、sessionStorage：
// 存储数据
sessionStorage.setItem('key', 'value');
// 读取数据
sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 删除全部
sessionStorage.clear();
localstoragesessionStorage_44">二、localstorage和sessionStorage的区别:
1、相同点
-
它们的储存大小都是5M;
-
它们都用于存储客户端数据；
-
它们都只能存储字符串数据；
2、不同点
生命周期不同:
-
SessionStorage的生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭，那么所有通过SessionStorage存储的数据也就被清空了。
-
LocalStorage的生命周期是永久，除非用户显示在浏览器提供的UI上清除LocalStorage信息，否则这些信息将永远存在。
作用域不同:
-
SessionStorage数据独立于其他选项卡和窗口。如果同时打开了两个选项卡，其中一个更新了SessionStorage，则在其他选项卡和窗口中不会反映出来。
-
LocalStorage可跨浏览器窗口和选项卡间共享。如果在多个选项卡和窗口中打开了一个应用程序，而一旦在其中一个选项卡或窗口中更新了LocalStorage，则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。
Cookie_67">三、相比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 也是相互隔离。
