清理localstorage_清除本地数据的方法：Storage.removeItem()和localStorage.clear()

在前端开发项目过程中，经常会遇到处理数据的事情，尤其是数据存取和清除，从一个页面跳转到另外一个页面，涉及到数据的交接。有时候我们跳转到下一个页面的时候，不需要上一个页面的数据，所以这时候需要pass掉，如何实现呢？今天给大家介绍下两种方法：Storage.removeItem()和localStorage.clear()。

Storage.removeItem()

传递键名后，接口的removeItem()方法Storage将从该给定Storage对象中删除该键(如果存在)。在 Storage 该界面 Web存储API 可以访问特定域的会话或本地存储。

如果没有与给定键关联的项，则此方法将不执行任何操作。

语法storage.removeItem(keyName);

参量keyName一个DOMString包含你要删除的项的名称。

返回值

undefined。

例

以下函数在本地存储中创建三个数据项，然后删除该image数据项。function populateStorage() {

localStorage.setItem('bgcolor', 'red');

localStorage.setItem('font', 'Helvetica');

localStorage.setItem('image', 'myCat.png');

localStorage.removeItem('image');

}

我们可以对会话存储执行相同的操作。function populateStorage() {

sessionStorage.setItem('bgcolor', 'red');

sessionStorage.setItem('font', 'Helvetica');

sessionStorage.setItem('image', 'myCat.png');

sessionStorage.removeItem('image');

}

localStorage.clear()

跟Storage.removeItem()的是，localStorage.clear()作用是清除页面所有的数据。如果您不想要任何数据的话，可以执行：localStorage.clear();

拓展

既然聊到存储和删除数据，这里多谈谈点相关知识点，也是跟这个相关，就是JS本地保存数据的几种方法。

Cookie

这个恐怕是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便 但它的缺点也很多： 比如跨域访问问题；无法保存太大的数据(最大仅为4KB)；本地保存的数据会发送给服务器，浪费带宽 等等；

使用sessionStorage、localStorage

localStorage：

是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端(浏览器)，属于本地持久层储存

sessionStorage：用于本地存储一个会话(session)中的数据，一旦会话关闭，那么数据会消失，比如刷新。 有时候，我们需要将数据存储到sessionStorage和localStorage中，这样做的好处有： 1 缓存数据2 减少对内存的占用

但是，storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。

它能保存更大的数据(IE8上是10MB，Chrome是5MB)，同时保存的数据不会再发送给服务器，避免带宽浪费。localStorage存储方法(sessionStorage类似)

localStorage.name =’vanida；

localStorage[“name”]=’vanida’；

localStorage.setItem(“name”,”vanida”);

//这三种设置值方式是一样的；localStorage获取值方法

var name = localStorage[“name”]

var name= localStorage.name

var name＝ localStorage.getItem(“name”);

//这三种获取值方式是一样的；localStorage清除特定值方法

//清除name的值

localStorage.removeItem(“name”);

localStorage.name＝”;

localStorage清除所有值方法

localStorage.clear()

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；

var person = {name:”vanida”,”sex”:”girl”,”age”:25};

localStorage.setItem(“person”,JSON.stringify(person));

// localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}”

注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！

然后取出person的对象你可以用JSON.parse();

person = JSON.parse(localStorage.getItem("person"));