localstorage 是 HTML5 提供的在客户端存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存的,除非人为干预删除。
localstorage作为本地存储来使用,解决了cookie存储空间不足的问题:cookie中每条cookie的存储空间为4k,但localStorage的存储空间有5M大小。另外,相比于cookie,localStorage可以节约带宽,在同一个域内,浏览器每次向服务器发送请求,http都会带着cookie,使cookie在浏览器和服务器之间来回传递,浪费带宽,但localStorage将第一次请求的数据直接存储到本地,避免了来回传递。
localstorage 有两种方法:分别是 localstorage 和 sessionStorage 。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,而sessionStorage在当会话结束的时候,sessionStorage中的键值对会被清空。
这里主要是对本地存储的一个简单封装,让使用更加方便快捷
管理本地存储的工具方法 store.js
import Store from 'store'; const keyName = 'pps-'; // 本地存储前缀,避免因为不同项目store的重复而产生影响 const setStore = function (key, content) { let obj = { content: content, datetime: new Date().getTime(), }; Store.set(keyName + key, obj); }; const getStore = function (key, params) { let obj = Store.get(keyName + key); if (params === 'datetime') { return obj ? obj.datetime : null; } return obj ? obj.content : null; }; const removeStorage = function (key) { Store.remove(keyName + key); }; /** * storeToken */ export const storeToken = { name: 'token', get(params) { return getStore(this.name, params) || null; }, set(value) { setStore(this.name, value); }, remove() { removeStorage(this.name); }, };
使用
import { storeToken } from '@/utils/store'; // 获取 storeToken.get(); // 获取存储的内容 storeToken.get('datetime'); // 获取存储的时间 // 设置 storeToken.set('12132132146'); // 删除 storeToken.remove();
随缘而来,乘风而去,山高海阔,自有我风采!
所属分类:
JavaScript