JavaScript本地储存：localStorage、sessionStorage、cookie

你曾是灬少年
1,326 阅读4分钟

JavaScript有三种数据存储方式：

  • sessionStorage
  • localStorage
  • cookier

1、sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

  • 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
  • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文， 这点和 session cookies 的运行方式不同。
  • 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
  • 关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。 

语法

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

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

2、localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

  • localStorage 是 HTML5 标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除
  • localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信

语法：同sessionStorage

3、cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息 Cookie 数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookie Cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 Cookie内存大小受限，一般每个域名下是4K左右，每个域名大概能存储50个键值对

  • 通过访问document.cookie可以对cookie进行创建，修改与获取
  • 默认情况下，cookie 在浏览器关闭时删除，你还可以为 cookie的某个键值对 添加一个过期时间
  • 如果设置新的cookie时，某个key已经存在，则会更新这个key对应的值，否则他们会同时存在cookie中

语法

    // 设置cookie
    document.cookie = "username=orochiz"
    document.cookie = "age=20"
 
    // 读取cookie
    var msg = document.cookie
    console.log(msg) // username=orochiz; age=20
 
    // 添加过期时间（单位：天）
    var d = new Date() // 当前时间 2019-9-25
    var days = 3       // 3天
    d.setDate(d.getDate() + days)
    document.cookie = "username=orochiz;"+"expires="+d
 
    // 删除cookie （给某个键值对设置过期的时间）
    d.setDate(d.getDate() - 1)
    console.log(document.cookie)

总结

相同点：都保存在浏览器端，可以在Application中查看

不同点

传递方式不同

  • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

数据大小不同

  • cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
  • 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识
  • sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

数据有效期不同

  • sessionStorage仅在当前浏览器窗口关闭前有效
  • localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
  • cookie只在设置的cookie过期时间之前一直有效

作用域不同

  • sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
  • localStorage在所有同源窗口中都是共享的
  • cookie也是在所有同源窗口中都是共享的
  • Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
  • Web Storage的api接口使用更方便
avatar
文章
阅读
粉丝