js关闭手机浏览器_几种常用的浏览器储存方式

“ Local Storage、Session Storage、Cookies、Vuex几种常用的存储方式，你真的会用吗？”

我们开发网站的时候，经常会需要储存一些数据。用什么来储存呢？储存的数据类型包括基本数据类型和复杂数据类型。

常用的储存方式有：Local Storage、Session Storage、Cookies、Vuex

01

—

定义

• Local Storage

储存的值能永久的储存在浏览器上。

同一个浏览器上的同一个域名下，储存数据一直都在。

只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改同一个localStorage对象。

数据类型是标准的键值对(Key-Value)。

• Session Storage

储存特定于某个会话的数据，储存数据依赖于当前窗口(当前会话)。

如果当前窗口关闭，储存数据会消失。

如果打开新窗口，无储存数据(储存数据是依赖于浏览器窗口的，之前窗口对应的储存数据不会在新窗口对应的储存地方出现)。

如果当前窗口刷新，储存数据不变。

如果启动另外一个浏览器并打开一个窗口，无储存数据(储存数据是依赖于浏览器窗口的，之前窗口对应的储存数据不会在新窗口对应的储存地方出现)

只要在相同的协议、相同的主机名、相同的端口、同一个窗口(浏览器的标签页)下，就能读取/修改同一个sessionStorage对象。

数据类型是标准的键值对(Key-Value)。

• Cookies

cookie生命期为只在设置的cookie过期时间之前一直有效。

cookie是基于同一个浏览器使用。(我们这里说的储存方式都是基于同一个浏览器)

cookie与是否关闭浏览器或窗口没关系。这点与localStorage相同。

• Vuex

在运行中储存数据，可以供程序全局使用。

是一种集中式状态管理模式，它按照一定的规则管理状态，保证状态的变化是可预测的。

如果当前窗口关闭，储存数据会消失。

如果打开新窗口，储存数据会消失。

如果当前窗口刷新，储存数据会消失。

如果启动另外一个浏览器并打开一个窗口，储存数据会消失。

相比localStorage和sessionStorage，vuex存储的数据可以即时更新到当前项目下的所有引用了该数据的组件。但是如果刷新页面的话，vuex存储的值会重置，而localStorage和sessionStorage存储的值不会重置。

数据类型是无限制。

• 之间的关系

1. cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。

2. cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭即清除，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。

3. cookie的存储大小受限制，一般不超过4k，而localStorage和sessionStorage的存储大小一般不超过5M，大大提高了存储的体积。

4. sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在的。

5. vuex是在内存中储存的。其他3种是物理储存。

02

—

使用

• Local Storage

localStorage.setItem(name, value);

localStorage.getItem(name);

• Session Storage

sessionStorage.setItem(name, value);

sessionStorage.getItem(name);

• Cookies

要安装js-cookie ,执行npm install js-cookie --save

import Cookies from "js-cookie";

Cookies.set(name, value);

Cookies.get(name);

• Vuex

要安装vuex,执行npm install vuex --save

src/main.js文件

import Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";require("./permission");Vue.config.productionTip = false;new Vue({  router,  store,  render: h => h(App)}).$mount("#app");

src/store/index.js文件

import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({  state: {},  mutations: {},  actions: {},  modules: {}});

03

—

业务场景

• Local Storage

  (1) 适合长期储存的数据

  (2) 可以用来统计页面访问次数

• Session Storage

  (1) 敏感性账号一次性登录

  (2) 可以用来统计当前页面元素的点击次数。

• Cookies

(1)判断用户是否登陆过网站，以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie，则每次登录必须重新填写登录的相关信息。

(2)保存上次登录的时间等信息。

(3)保存上次查看的页面

(4)可以用来统计页面访问次数

(5)存储用户名和密码相关信息

• Vuex

(1)单页应用中，组件之间的共享状态，一般用于中大型单页应用

(2)购物车的数据共享