Client-side_storate

Modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary. This lets you persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more. This article explains the very basics of how these work.
现代浏览器支持一种或多种方式在用户允许的情况下将web网站的数据保存到用户计算机上，然后当需要的时候取出数据。这让你可以将数据长时间保存,保存网站或者文档离线使用。保存我们的网站的特殊设置，还可以进行更多操作，这篇文章非常基础的讲解了客户端存储怎样工作。

Prerequisites: JavaScript basics (see first steps, building blocks, JavaScript objects), the basics of Client-side APIs
Objective: To learn how to use client-side storage APIs to store application data.

少了一部分，直接到细节

Old fashioned: cookies

The concept of client-side storage has been around for a long time. Since the early days of the web, sites have used cookies to store information to personalize user experience on websites. They're the earliest form of client-side storage commonly used on the web.

Because of that age, there are a number of problems — both technical and user experience-wise — afflicting cookies. These problems are significant enough that upon visiting a site for the first time, people living in Europe are shown messages informing them if they will use cookies to store data about them. This is due to a piece of European Union legislation known as the EU Cookie directive.

For these reasons, we won't be teaching you how to use cookies in this article. Between being outdated, their assorted security problems, and inability to store complex data, there are better, more modern ways to store a wider variety of data on the user's computer.

The only advantage cookies have is that they're supported by extremely old browsers, so if your project requires that you support browsers that are already obsolete (such as Internet Explorer 8 or earlier), cookies may still be useful, but for most projects you shouldn't need to resort to them anymore.

Why are there still new sites being created using cookies? This is mostly because of developers' habits, use of older libraries that still use cookies, and the existence of many web sites providing out-of-date reference and training materials to learn how to store data.

过去流行的使用：Cookies

客户端存储的概念已经存在很长时间了。从网络的早期开始, 网站就使用 cookie 存储信息, 以个性化网站上的用户体验。它们是 web 上最早的客户端存储通用形式。

由于这个时代, cookies无论是技术上还是用户体验上的问题。这些问题很重要, 当第一次访问一个网站时, 生活在欧洲的人们会显示消息, 告知他们是否会使用 cookie 存储有关它们的数据。这是由于欧洲联盟的一项立法被称为EU Cookie directive(欧盟曲奇指令)。

基于这些原因, 我们不会教你如何在本文中使用 cookie。在过时、各种安全问题以及无法存储复杂数据之间, 有更好的、更现代的方法来在用户的计算机上存储更广泛的数据。

cookie 的唯一优点是它们受非常旧的浏览器支持, 因此如果您的项目需要支持已经过时的浏览器 (如 Internet 资源管理器8或更早版本), cookie 可能仍然有用, 但对于大多数项目, 您不需要再求助于他们了

为什么仍然有新的网站正在使用 cookie 创建？这主要是因为开发人员的习惯, 使用仍然使用 cookie 的旧库, 以及许多网站的存在, 这些网站提供过时的参考和培训材料来学习如何存储数据。

New school: Web Storage and IndexedDB

Modern browsers have much easier, more effective APIs for storing client-side data than by using cookies.

• The Web Storage API provides a very simple syntax for storing and retrieving smaller, data items consisting of a name and a corresponding value. This is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc.
• The IndexedDB API provides the browser with a complete database system for storing complex data. This can be used for things from complete sets of customer records to even complex data types like audio or video files.
  You'll learn more about these APIs below.

新学校：Web Storage and IndexedDB

现代浏览器拥有比使用 cookie 更容易、更有效的 api 来存储客户端数据。

• Web Storage API 提供了一个非常简单的语法, 用于存储和检索由名称和相应值组成的较小的数据项。当您只需要存储一些简单数据 (如用户名)、是否登录、屏幕背景使用什么颜色等时, 这一点很有用。
• IndexedDB API 为浏览器提供了一个完整的数据库系统, 用于存储复杂数据。这可以用于从完整的客户记录集到甚至复杂的数据类型 (如音频或视频文件) 的事情。
  您将了解下面这些 api 的更多信息。

单词记录

• retrieve
  英 [rɪ'triːv] 美 [rɪ'triv]
  vt. [计] 检索；恢复；重新得到
  vi. 找回猎物
  n. [计] 检索；恢复，取回
• persist
  英 [pə'sɪst] 美 [pɚ'sɪst]
  vi. 存留，坚持；持续，固执
  vt. 坚持说，反复说
• retain
  英 [rɪ'teɪn] 美 [rɪ'ten]
  vt. 保持；雇；记住
• concept
  英 ['kɒnsept] 美 ['kɑnsɛpt]
  n. 观念，概念
  -personalize
  英 ['pɜːs(ə)n(ə)laɪz] 美 ['pɝsənəlaɪz]
  vt. 使个性化；把…拟人化
  -afflicting
  [ə'fliktiŋ]
  adj. 痛苦的
  v. 使苦恼（afflict的ing形式）
  -significant
  英 [sɪg'nɪfɪk(ə)nt] 美 [sɪɡ'nɪfɪkənt]
  adj. 重大的；有效的；有意义的；值得注意的；意味深长的
  n. 象征；有意义的事物
• advantage
  英 [əd'vɑːntɪdʒ] 美 [əd'væntɪdʒ]
  n. 优势；利益；有利条件
  vi. 获利
  vt. 有利于；使处于优势
• training
  英 ['treɪnɪŋ] 美 ['trenɪŋ]
  n. 训练；培养；瞄准；整枝
  v. 训练；教养（train的ing形式）
• retrieving
  v. （美）（计算机的）[计] 检索（retrieve的ing形式）；恢复；取回；补偿
• consisting
  v. 组成；存在；一致（consist的ing形式）
• corresponding
  英 [,kɒrɪ'spɒndɪŋ] 美 [,kɔrə'spɑndɪŋ]
  adj. 相当的，相应的；一致的；通信的
  v. 类似（correspond的ing形式）；相配

其他

url:https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage