localstorage:_JavaScript中LocalStorage的完整指南：第1部分

localstorage:

This article is divided into of two parts:

本文分为两个部分：

• Part-1: Theoretical Explanation
  第一部分：理论解释
• Part-2: Practical Implementation
  第二部分：实际实施

localStorage的理论解释 (A Theoretical Explanation for localStorage)

什么是localStorage？ (What is a localStorage?)

localStorage is a type of web storage that allows JavaScript sites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed. The stored data is saved across browser sessions.

localStorage是一种Web存储，它允许JavaScript网站和应用直接在浏览器中存储和访问数据，没有到期日期。 这意味着即使关闭浏览器窗口，存储在浏览器中的数据仍将保留。 存储的数据跨浏览器会话保存。

Data in a localStorage object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.

关闭最后一个“私有”选项卡后，将清除在“私有浏览”或“隐身”会话中创建的localStorage对象中的数据。

存储对象提供的方法和属性 (Methods and Properties provided by Storage Object)

• setItem(key, value) – store key/value pair.

  setItem(key，value) –存储键/值对。

• getItem(key) – get the value by key.

  getItem(key) –通过键获取值。

• removeItem(key) – remove the key with its value.

  removeItem(key) –删除键及其值。

• clear() – delete everything.

  clear() –删除所有内容。

• key(index) – get the key on a given position.

  key(index) –获取给定位置上的键。

• length – the number of stored items.

  长度 –存储的项目数。

Don’t be confused, I’ll be covering each of them individually with detailed explanation.

请勿混淆，我将逐一详细介绍它们。

首先： setItem() (First: setItem())

Just as the name implies, this method allows you to store values in the localStorage object.

顾名思义，此方法允许您将值存储在localStorage对象中。

It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.

它带有两个参数： 键和值 。 以后可以引用该键以获取附加到它的值。

Where name is the key and Abhishek Srivastava is the value. Also note that localStorage can only store strings.

其中， name是关键，而Abhishek Srivastava是值。 还要注意，localStorage只能存储字符串。

To store arrays or objects, you would have to convert them to strings.

要存储数组或对象，必须将它们转换为字符串。

To do this, we use the JSON.stringify() method before passing to setItem().

为此，我们在传递给setItem()之前使用JSON.stringify()方法。

第二：getItem() (Second: getItem())

The getItem() method allows you to access the data stored in the browser’s localStorage object.

使用getItem()方法可以访问存储在浏览器的localStorage对象中的数据。

It accepts only one parameter which is the key and returns the value as a string.

它仅接受一个作为键的参数，并将该值作为字符串返回。

To retrieve the user key stored above:

要检索上面存储的用户密钥：

This returns a string with value as:

这将返回一个字符串，其值为：

To use this value, you would have to convert it back to an object.

要使用此值，您必须将其转换回一个对象。

To do this, we make use of the JSON.parse() method, which converts a JSON string into a JavaScript object.

为此，我们利用JSON.parse()方法，该方法将JSON字符串转换为JavaScript对象。

第三： removeItem () (Third: removeItem())

When passed a key name, the removeItem() method will remove that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.

传递键名称后， removeItem()方法将从存储中删除该键(如果存在)。 如果没有与给定键关联的项，则此方法将不执行任何操作。

Forth: clear() (Forth: clear())

This method, when invoked, clears the entire storage of all records for that domain. It does not receive any parameters.

调用此方法时，将清除该域的所有记录的整个存储。 它不接收任何参数。

Fifth: key() (Fifth: key())

The key method comes in handy in situations where you need to loop through keys and allows you to pass a number or index to localStorage to retrieve the name of the key.

如果需要循环浏览键，并且允许您将数字或索引传递给localStorage来检索键的名称，则该键方法会派上用场。

第六名：长 (Sixth: length)

The length property returns the number of items stored in the browsers Storage Object, for this particular domain..

length属性返回此特定域在浏览器存储对象中存储的项目数。

The length property belongs to the Storage Object, which can be either a localStorage object or a sessionStorrage object.

length属性属于存储对象，可以是localStorage对象或sessionStorrage对象。

That’s it, now you would have good understanding of methods and properties provided by the Storage Object

就是这样，现在您将对存储对象提供的方法和属性有很好的了解

浏览器兼容性 (Browser compatibility)

localStorage限制 (localStorage limitations)

As easy as it is to use localStorage, it is also easy to misuse it. The following are limitations, and also ways to NOT use localStorage:

使用localStorage既容易，也很容易滥用它。 以下是限制，以及不使用localStorage的方法：

• Do not store sensitive user information in localStorage

  不要在localStorage中存储敏感的用户信息

• It is not a substitute for a server based database as information is only stored on the browser

  它不能替代基于服务器的数据库，因为信息仅存储在浏览器中

• localStorage is limited to 5MB across all major browsers

  所有主要浏览器的 localStorage限制为5MB

• localStorage is quite insecure as it has no form of data protection and can be accessed by any code on your web page

  localStorage 非常不安全，因为它没有任何形式的数据保护，并且可以通过您网页上的任何代码进行访问

• localStorage is synchronous, meaning each operation called would only execute one after the other

  localStorage是同步的 ，这意味着每个调用的操作只会在另一个操作之后执行

With these, we have been armed with the power of localStorage in our web applications.

有了这些，我们就可以在Web应用程序中使用localStorage的功能。

If you have come to this far, Congratulations! You have good theoretical understanding of localStorage.

如果您已经走到这一步，恭喜！ 您对localStorage有很好的理论理解。

Well, that’s it for today :(

好吧，今天就这样了：(

I am sorry buddy, I really don’t want to leave it in between, but currently, I am a bit short on time, plus, if I write both theoretical explanation and the practical implementation in a single blog, it will be too lengthy, and lengthy blogs become boring :/

对不起，哥们，我真的不想把它放在中间，但是目前，我的时间有点短，而且，如果我在一个博客中写理论解释和实际实现，那将会太冗长，冗长的博客变得无聊：/

So yeah, that’s it for today, I will be back with the Implementation part next weekend and yes I can assure you that the second part is going to be much more interesting and we going to build something really cool, till then, enjoy, and thanks for reading till the end.

是的，今天就这样，我将在下周末返回实施部分，是的，我可以向您保证，第二部分将变得更加有趣，我们将打造出非常酷的东西，直到那时，才能享受，并感谢您阅读到最后。

Happy Coding!

编码愉快！

Feel free to reach out to me anytime if you want to discuss something. I would be more than happy if you send your feedback, suggestions.

如果您想讨论任何事情，请随时与我联系。 如果您发送反馈意见和建议，我将非常高兴。

Web: https://portfolio.abhisheksrivastava.me/Instagram: https://www.instagram.com/theprogrammedenthusiast/LinkedIn: https://www.linkedin.com/in/abhishek-srivastava-49482a190/Github: https://github.com/abhishek2xEmail: abhisheksrivastavabbn@gmail.com

网址： https://portfolio.abhisheksrivastava.me/ Instagram： https://www.instagram.com/theprogrammedenthusiast/ LinkedIn： https://www.linkedin.com/in/abhishek-srivastava-49482a190/ Github上： HTTPS： //github.com/abhishek2x电子邮件：abhisheksrivastavabbn@gmail.com

翻译自: https://medium.com/swlh/a-complete-guide-to-localstorage-in-javascript-ef65098e5a36

localstorage: