持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

什么是storage

storage是网页中的存储方式，分为

localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

2者的区别如下：

关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留

storage使用

Storage有如下的属性和方法：

属性：

Storage.length：只读属性

返回一个整数，表示存储在Storage对象中的数据项数量；
方法：

Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称；

Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；

Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。

如果key存储，则更新其对应的值；

Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；

Storage.clear()：该方法的作用是清空存储中的所有key，可以使用clear函数来清除存储在localStorage中应用程序的所有内容。；

 localStorage.setItem('name','gogo')
 let item = localStorage.getItem('name')
 console.log('name: ', item);

这个值可以在浏览器看到

同样的我们可以sesstionStorage来测试一下

      sessionStorage.setItem("sessionName", "jojo");
      let sessionItem = sessionStorage.getItem('sessionName')
      console.log('sessionItem: ', sessionItem);

接着在浏览器的Session Storage可以查看这个值

可以看到2种方式都能存储值，主要注意好他们的区别就行。

注意事项

大多数浏览器的存储空间有限，最多可达5 MB 尝试存储巨大字符串时会阻塞主线程。确保不要同时更新相同的键，因为这将导致问题。

总结

无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议，如果想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，改数据对象没有过期时间，今天、下周、明年都能用，除非手动去删除。

对于sessionStorage，不同窗口间的数据是不能共享的。

Js之Storage

什么是storage

storage使用

注意事项

总结