本地存储是一种有用的 Web 开发工具，使开发人员能够在用户的浏览器中保存数据。在本文中，我们将介绍本地存储的不同功能，从初学者级别的示例开始，然后继续介绍更复杂的技术。读完本指南后，您将对如何在 Web 应用程序中成功使用本地存储有基本的了解。

本地存储初级示例

1。存储用户首选项：

    
    
    



    Choose a theme:
    
        Light
        Dark
        Medium
    
    Save Preference

    

当用户选择主题并点击“保存首选项”按钮时，此代码会将主题记录到控制台。要阅读此日志，请打开浏览器的开发人员工具（通常按 F12 或右键单击页面并选择“检查”）并转到控制台选项卡。（阅读更多）

2.记住用户输入：

    
    
    



    
    Save Input

    

此 HTML 示例生成一个简单的网页，允许用户在文本字段中输入文本并将其保存到浏览器的本地存储中。

当用户在输入框中输入文本并点击“保存输入”按钮时，文本将保存在浏览器的本地存储中。这意味着即使用户刷新网站或关闭并重新打开浏览器，保存的输入仍然可以访问。控制台日志和警报通知用户其输入已成功保存。 （阅读更多）

3.购物车持久化：

    
    
    



    
Shopping Cart
    

此示例演示如何使用本地存储保存购物车。添加到购物车的商品将作为数组保存在本地存储中的“cart”键下。页面加载时，将从本地存储中提取并显示已保存的购物车项目。

当您单击“将商品 X 添加到购物车”按钮之一时，相应的商品将添加到购物车，并且更新的购物车内容将显示在控制台中。要检查这些日志，请打开浏览器的开发人员工具（通常按 F12 或右键单击页面并选择“检查”）并转到控制台选项卡。

您还可以直接通过浏览器的开发者工具查看本地存储。大多数浏览器允许您通过右键单击页面，选择“检查”以获取开发人员工具，然后导航到“应用程序”或“存储”选项卡来执行此操作。从那里，展开“本地存储”部分以查看网站的键值对。在此示例中，键“cart”包含表示已保存的购物车项目的 JSON 字符串。
阅读全文 - 掌握 Web 开发中的本地存储：8 个实践示例，从新手到专家！

学习Json-点击这里