前端本地存储

水深无声 2022-05-31 02:09 296阅读 0赞

## 1、cookie 储存 ##

cookie 容量很小，所有浏览器都支持，但容量只能存 4KB 大小的数据，用法用 document.cookie 来设置，如果同名会覆盖掉原有的数据，获取也是同样 document.cookie，多个数据会以分号分隔全部返回;

document.cookie = 'name=xian';
    	document.cookie = encodeURIComponent('age') + '=' + encodeURIComponent(25);  // 去掉空格方式
    	console.log(document.cookie)

获取到的数据是  "name=xian; xage=25"

## 2、localStorage 和 sessionStorage H5新增的方法，要IE8以上的浏览器才有 ##

**2.1localStorage 用此方法保存的数据只要没有清除浏览器的缓存或者删除浏览器，数据都会一直存在，**

使用方法

window.localStorage.setItem('name1','aaa');  //或者 
    	localStorage['name2'] = 'xxx'
    	// 获取方法
    	window.localStorage.getItem('name1'); //或者
    	localStorage['name2']
       //删除方法
    	localStorage.removeItem('name2')

** 2.2  sessionStorage 保存方法是会话级的，关闭浏览器一阵后会自动消失**

使用方法

//设置
    	sessionStorage.setItem('name1','aaa'); //或者
    	sessionStorage['name2'] = 'xxx';
    	
    	//获取
    	window.sessionStorage.getItem('name1');
    
    	//删除
    	sessionStorage.removeItem('name1');

注意 ： 如果保存的数据是对象一定要用 JSON.stringify(obj) 转成字符串，不然后保存的是 \[obj\];

以下是一组现成的使用方法，可直接使用，

**save 是保存数据，item 是数据名，str 是要保存的数据，type 不写是保存 localStorage，写上是保存 sessionStorage**

**get 是获取方法 ，item 是数据名，type 不写是获取 localStorage 数据，写上是获取 sessionStorage 数据**

**remove 是删除方法，item 是数据名，type 同上**

**extend 是合并数据，old 是原数据，newObj 是要合并进原数据的对象，cover 是如果有重名的是否覆盖原有的参数**

**updata 是在原有的数据上修改合并数据，item 是修改的数据名，addObj 是要新增或者修改对象中的数据，type 同上，实际是用 extend 把两数据合并在一起然后再保存**