JS localStorage、sessioinStorage本地存储

一、localStrorage存储方法

1、什么叫localStorage？

localStorage是一个局部储存器，它是html5新增的一个本地存储API，可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输。

2、localStorage的储存方法

localStorage有三种形式(存值/取值/删值)，localStorage相当于window对象下面的一个属性，所以有[ ]和.调用，但也具有自身的setItem方法、getItem方法、removeItem方法

1、自身方法
localStorage.setItem('name','Mr.Z'); //添加key和value到本地
localStorage.getItem('name'); //获取指定的本地存储点key
localStorage.removeItem('name');//删除指定的本地存储key

2、[ ]方法
localStorage['name'] = 'Mr.Z'; //添加key和value到本地
localStorage['name']; //获取指定的本地存储点key
delete removeItem('name');//删除指定的本地存储key

3、.方法
localStorage.name = 'Mr.Z'; //添加key和value到本地
localStorage.name; //获取指定的本地存储点key
delete localStorage.name;//删除指定的本地存储key

1、删除全部的本地存储
localStorage.clear();//删除全部的本地存储\

2、获取所有的值
localStorage.valueOf();//获取所有的值

3、localStorage的优点缺点

优点：
①大小5m左右
②无需向服务器发送请求
③数量：无限制。
④生命周期永久(如果不刻意删除，会永久存在)
缺点：
①只兼容IE8以上

二、sessionStorage存储方法

1、什么叫sessionStorage？

sessionStorage用于临时在游览器或者是标签页面里储存的数据，暂时性的数据，一关闭游览器或者标签页面这些数据就会被清除

2、sessionStorage的储存方法

sessionStorage有三种形式(存值/取值/删值)，localStorage相当于window对象下面的一个属性，所以有[ ]和.调用，但也具有自身的setItem方法、getItem方法、removeItem方法

1、自身方法
sessionStorage.setItem('name','Mr.Z'); //添加key和value到本地
sessionStorage.getItem('name'); //获取指定的本地存储点key
sessionStorage.removeItem('name');//删除指定的本地存储key

2、[ ]方法
sessionStorage['name'] = 'Mr.Z'; //添加key和value到本地
sessionStorage['name']; //获取指定的本地存储点key
delete removeItem('name');//删除指定的本地存储key

3、.方法
sessionStorage.name = 'Mr.Z'; //添加key和value到本地
sessionStorage.name; //获取指定的本地存储点key
delete sessionStorage.name;//删除指定的本地存储key

1、删除全部的本地存储
sessionStorage.clear();//删除全部的本地存储\

2、获取所有的值
sessionStorage.valueOf();//获取所有的值

3、sessionStorage的优点缺点

优点：
①大小5m左右
②无需向服务器发送请求
③数量：无限制。
缺点：
①只兼容IE8以上
②单标签页限制 (生命周期暂时性，关闭当前标签页或者游览器，数据就会被清除)