清除本地数据的方法：Storage.removeItem()和localStorage.clear() - Web前端

在前端开发项目过程中，经常会遇到处理数据的事情，尤其是数据存取和清除，从一个页面跳转到另外一个页面，涉及到数据的交接。有时候我们跳转到下一个页面的时候，不需要上一个页面的数据，所以这时候需要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"));

标签：方法数据WebclearlocalStorageremoveItem