前端开发中,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 也是相互隔离。

你可能感兴趣的:(javascript,Storage,localstorage,sessionStorage,存储数据,Cookie,vuex,生命周期)