×

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

作者:Web前端之家2020.10.26来源:Web前端之家浏览:915评论:0
关键词:jsStorage
微信公众号

微信公众号

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

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20201026a2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria