如何在Web浏览器存储中存储数据-解释了localStorage和sessionStorage

In order to manage data handled by your web application, you do not necessarily need a database. The respective Browser Storage features are supported by Chrome (version 4 and higher), Mozilla Firefox (version 3.5 and higher) and Internet Explorer (version 8 and higher), and a range of other browsers including those of iOS and Android.

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

There are two main possibilities for browser storage: localStorage and sessionStorage.

浏览器存储主要有两种可能性：localStorage和sessionStorage。

本地存储 (localStorage)

Any content/data saved to the localStorage object will be available after the browser has been restarted (closed and opened again). In order to save an item to localStorage, you can use the method setItem(). This method must be handed a key and a value.

重新启动浏览器(关闭并再次打开)后，保存到localStorage对象的所有内容/数据都将可用。 为了将项目保存到localStorage ，可以使用setItem()方法。 该方法必须传递一个键和一个值。

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

To retrieve the item from the localStorage, the method getItem must be used. The getItem method must be handed the key of the data you would like to retrieve:

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

Example: localStorage.getItem("mykey");

You can remove an item from localStorage by using the removeItem() method. This method must be handed the key of the item to be removed:

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

Example: localStorage.removeItem("mykey");

To clear the entire localStorage, you should use the clear() method on the localStorage object:

要清除整个localStorage ，应在localStorage对象上使用clear()方法：

Example: localStorage.clear();

sessionStorage (sessionStorage)

Items saved in the sessionStorage object will remain until the browser is closed by the user. Then, the storage will be cleared.

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

You can save an item to sessionStorage, please use the method setItem() on the sessionStorage object:

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

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

To retrieve the item from the sessionStorage, the method getItem must be used. The getItem method must be handed the key of the data you would like to retrieve:

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

Example: sessionStorage.getItem("mykey");

You can remove an item from sessionStorage by using the removeItem() method. This method must be handed the key of the item to be removed:

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

Example: sessionStorage.removeItem("mykey");

To clear the entire sessionStorage, you should use the clear() method on the sessionStorage object:

要清除整个sessionStorage ，应在sessionStorage对象上使用clear()方法：

Example: sessionStorage.clear();

将阵列保存到localStorage和sessionStorage (Saving arrays to localStorage and sessionStorage)

You cannot just save single values to the localStorage and sessionStorage, but you can also save the content of an array.

您不仅可以将单个值保存到localStorage和sessionStorage ，还可以保存数组的内容。

In this example, we have an array with numbers:

在这个例子中，我们有一个数字数组：

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

We can now save it to localStorage or sessionStorage using the setItem() method:

现在，我们可以使用setItem()方法将其保存到localStorage或sessionStorage ：

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

or, for sessionStorage:

或者，对于sessionStorage ：

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

In order to be saved, the array must first be converted to a string. In the example shown above, we are using the JSON.stringify method to accomplish this.

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

When retrieving our data from the localStorage or sessionStorage, convert it back to an array:

从localStorage或sessionStorage检索数据时，将其转换回数组：

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

or, for sessionStorage:

或者，对于sessionStorage ：

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

翻译自: https://www.freecodecamp.org/news/how-to-store-data-in-web-browser-storage-localstorage-and-session-storage-explained/