freeCodeCamp/guide/chinese/miscellaneous/store-data-in-web-browsers-.../index.md

3.0 KiB
Raw Blame History

title localeTitle
Store Data in Web Browsers Storage 将数据存储在Web浏览器存储中

为了管理Web应用程序处理的数据您不一定需要数据库。 Chrome版本4及更高版本Mozilla Firefox版本3.5及更高版本和Internet Explorer版本8及更高版本以及一系列其他浏览器包括iOS和Android版本均支持各自的浏览器存储功能。

浏览器存储有两种主要可能性:

1. localStorage

重新启动浏览器(关闭并再次打开)后,保存到localStorage对象的任何内容/数据都将可用。为了**将项目保存**到localStorage ,您可以使用方法setItem() 。这个方法必须是一个键和一个值。

Example: localStorage.setItem("mykey","myvalue"); 

要从**localStorage检索项目** ,必须使用方法getItem 。必须将getItem方法传递给您要检索的数据的键:

  Example: localStorage.getItem("mykey"); 

您可以使用removeItem()方法从localStorage删除项目。必须将此方法交给要删除的项目的键:

  Example: localStorage.removeItem("mykey"); 

要清除整个localStorage ,您应该在localStorage对象上使用clear()方法:

  Example: localStorage.clear(); 

2. sessionStorage

保存在sessionStorage对象中的项目将保留,直到用户关闭浏览器。然后,存储将被清除。

您可以将项目保存到sessionStorage ,请使用sessionStorage对象上的方法setItem()

Example: sessionStorage.setItem("mykey","myvalue"); 

要从**sessionStorage检索项目** ,必须使用方法getItem 。必须将getItem方法传递给您要检索的数据的键:

  Example: sessionStorage.getItem("mykey"); 

您可以使用removeItem()方法从sessionStorage删除项目。必须将此方法交给要删除的项目的键:

  Example: sessionStorage.removeItem("mykey"); 

要清除整个sessionStorage ,您应该在sessionStorage对象上使用clear()方法:

  Example: sessionStorage.clear(); 

将数组保存到localStorage和sessionStorage

您不仅可以将单个值保存到localStoragesessionStorage ,还可以保存数组的内容。

在这个例子中,我们有一个带数字的数组:

var ourArray =[1,2,3,4,5]; 

我们现在可以使用setItem()方法将其保存到localStoragesessionStorage

localStorage.setItem("ourarraykey",JSON.stringify(ourArray)); 

或者,对于sessionStorage

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray)); 

为了保存,必须首先将数组转换为字符串。在上面显示的示例中,我们使用JSON.stringify方法来完成此任务。

localStoragesessionStorage检索数据时,将其转换回数组:

var storedArray = localStorage.getItem("ourarraykey"); 
 ourArray = JSON.parse(storedArray); 

或者,对于sessionStorage

var storedArray = sessionStorage.getItem("ourarraykey"); 
 ourArray = JSON.parse(storedArray);