JS面试题7——localStorage,sessionStorage,cookie的区别

Source

公共点:都是用于在客户端存放数据的

区别:

1. 数据存放的有效期不同

<script>
sessionStorage.setItem("key", "123"); // 仅在当前浏览器窗口关闭前有效
localStorage.setItem("key", "456"); // 持久化存储(浏览器关闭也一直保存)
document.cookie = 'name=789'; // 在设置的过期时间之前都有效(无论是否关闭浏览器)
</script>

/* cookie可以设置有效期 */
<script>
export default{
  create(){
    var date = new Date();
    var time = date.getTime()
    date.setTime(time)
    document.cookie = 'name=789; express=' + date.toUTCString() + '';
  }
}
</script>

2. 存储大小的限制不同(不同的浏览器存储的大小不同)

cookie的存储量不能超过4k,localStorage和sessionStorage不能超过5M

3. 作用域不同

cookie在所有同源窗口中都是共享的;localstorage也是在所有同源窗口中共享的;

sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

4. cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存