几种浏览器存储数据的方式

需求：记忆选中的选项，或许默认是东莞仓，

 

 

      //记住选择的仓库

      rememberWh(whParams){

          let key = this.$route.name + ':whSelected'

          localStorage.setItem(key, JSON.stringify(whParams))

      },

      //设置仓库

      setWh(){

          let key = this.$route.name + ':whSelected'

          let whInfo = localStorage.getItem(key);

          let that = this

          if(whInfo!=null){

              let wh = JSON.parse(whInfo);

              this.$nextTick(() => {

                  that.form.setFieldsValue({

                      whId: wh.whId,

                  })

              })

          }

      },

 

浏览器端存储数据的用途很广泛，比如在保存用户信息、存储个性化设置信息、保存某种状态或是资料等方面都会用到。

其中方法主要有三种：cookie、sessionStorage、localStorage。下面主要讨论一下我在学习过程中发现这三者的区别。

1.是否与服务器端交互：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。（每台电脑只会默认/记住本地选择的，因为不请求服务器）

2.存储大小限制：

cookie存储的数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，比如会话标识；

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3.数据有效期不同：

sessionStorage仅在当前浏览器窗口关闭或刷新前有效，需要持久保存的数据自然也就不可能使用sessionStorage；

localStorage保存数据始终有效，窗口或浏览器关闭也一直保存，因此可用作持久保存数据；

cookie只在开发人员设置的有效期时间之前一直有效，即使窗口或浏览器关闭。

4.作用域不同：

sessionStorage在不同的浏览器窗口中不能共享，即使是同源页面；

localStorage 在所有浏览器的同源窗口中都是共享的；

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