utils封装 —— localStorage && sessionStorage

LocalStorage 本地存储相关操作：
存储：localStorage.setItem(key,JSON.stringify(value))
获取：JSON.parse( localStorage.getItem(key) )
移除：localStorage.removeItem(key)
清空：localStorage.clear()

1.简单粗暴式封装

export class StorageService {

  constructor() { }
  
  setItem( key,value){
    return localStorage.setItem(key , JSON.stringify(value));
  }

  getItem(key){
    return JSON.parse(localStorage.getItem(key));
  }

  removeItem(key){
    return localStorage.removeItem(key);
  }
}

2.进一步精细封装 localStorage

export class LocalStorage{
	public localStorage:any;
	// localStorage 是一个 Object
	constructor(){
		if(!localStorage){
			throw new Error('Current brower does not support Local Storage');
		}
		this.localStorage = localStorage;
	}
	/**
	   * 保存字符串
	   * @param {string} key
	   * @param {string} value
	   */
	public set( key:string, value:string):void{
		this.localSotorage[key] = value;
	}
	/**
	   * 获取保存的字符串
	   * @param {string} key
	   * @returns {string}
	   */
	public get( key:string):string{
		return this.localStorage[key] || ' ';
	}
	/**
	   * 保存对象
	   * @param {string} key
	   * @param  value 
	   */
	public setObject( key:string, value:any):void{
		this.localStorage[key] = JSON.stringify(value);
	}
	/**
	   * 获取保存对象
	   * @param {string} key
	   * @returns {any}
	   */
	public getObject(key:string):any{
		return JSON.parse(this.localStorage[key || null])
	}
	  /**
	   * 移除保存的数据
	   * @param {string} key
	   * @returns {any}
	   */
	public remove(key:string):any{
		this.localStorage.removeItem(key);
	}
}

3.sessionStorage的封装与localStorage类似

export class SessionStorage{
	public sessionStorage:any;
	constructor(){
		if(!localStorage){
			throw new Error('Current brower does not support Local Storage');
		}
		this.sessionStorage = sessionStorage;
	}
	public set(key:string,value:string):void{
		this.sessionStorage[key] = value;
	}
	public get(key:string):string{
		return this.sessionStorage[key] || ' ';
	}
	public setObject(key:string,value:any):void{
		this.sessionStorage[key] = JSON.stringify(value);
	}
	public getObject(key:string):any{
		return JSON.parse(this.sessionStorage[key] || null);
	}
	public remove(key:string):void{
		this.sessionStorage.removeItem(key);
	}
}

4.这里顺带总结一下localStorage与sessionStorage的共同点与差异点：
（1）localStorage和sessionStorage 一样都是用来存储浏览器端临时信息的对象。
（2）他们均只能存储 String类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
（3）localStorage生命周期是“ 永久 ”，这意味着在每次会话结束之后用户需要手动清除localStorage信息，否则这些信息将永远存在。
（4）sessionStorage生命周期为“ 当前窗口或标签页 ”，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
（5）不同浏览器无法共享localStorage或sessionStorage中的信息。
（6）相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

utils封装 —— localStorage && sessionStorage

猜你喜欢