JavaScript 本地存储

JavaScript 是世界上最受欢迎的轻量级、解释性编译型编程语言之一。它采用同步和单线程的模式。在JavaScript中，程序被称为脚本。这些脚本以纯文本形式执行。我们可以直接在HTML页面上编写它们，也可以使用外部的JavaScript文件。JavaScript可以在浏览器中执行，也可以在服务器或其他任何具有特殊程序（JavaScript引擎）的设备上执行。JavaScript用于客户端和服务器端开发。

HTML DOM Window localStorage 由浏览器提供，它允许我们使用对象将数据以键值对的形式存储在Web浏览器中。localStorage是window界面的只读属性。LocalStorage是一种用于存储信息的Web存储类型。因此，JavaScript网站和应用程序可以存储和访问数据，而没有任何时间限制。数据因此将始终被保留，永不过期。因此，在浏览器窗口关闭后，保存在浏览器中的信息仍然可以访问。

本地存储的存储限制大于cookies（5MB vs. 4MB）。此外，它不总是与HTTP请求一起提供。因此，它是当前针对客户端存储的较优选项。

数据以键值对的形式存储，键是唯一的。键和值始终以存储在localStorage中的UTF-16 DOM字符串格式存在。

本地存储的主要特点如下：

存储是以起源（域）为界限的。
即使浏览器关闭或操作系统重启，数据也不会被删除，除非我们手动清除浏览器的本地存储。

语法：

ourStorage = window.localStorage;

以上将返回一个存储对象，可以用来访问当前来源的本地存储空间。

由localStorage对象提供的属性和方法：

setItem(key, value)：存储键/值对
getItem(key)：返回键前面的值
key(index)：获取给定索引上的键
length：返回存储项（数据）的数量
removeItem(key)：移除给定键及其值
clear()：从存储中删除所有内容

示例：以下代码段访问当前域的localStorage对象。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript localStorage</title>
 
    <style>
        div {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 2px solid black;
            background-color: green;
            color: white;
            margin: auto;
            text-align: center;
            font-size: 1.5rem;
        }
 
        .box {
            box-sizing: border-box;
        }
    </style>
</head>
 
<body>
 
    <div class="box">GeeksforGeeks</div>
 
    <script>
 
        // Saving data as key/value pair
        localStorage.setItem("name", "GeeksforGeeks");
        localStorage.setItem("color", "green");
 
        // Updating data
        localStorage.setItem("name", "GeeksforGeeks(GfG)");
        localStorage.setItem("color", "Blue");
 
        // Get the data by key
        let name = localStorage.getItem("name");
        console.log("This is - ", name);
        let color = localStorage.getItem("color");
        console.log("Value of color is - ", color);
 
        // Get key on a given position
        let key1 = localStorage.key(1);
        console.log(key1);
 
        // Get number of stored items
        let items = localStorage.length;
        console.log("Total number of items is ", items);
 
        // Remove key with its value
        localStorage.removeItem("color");
 
        // Delete everything
        localStorage.clear();
    </script>
</body>
</html>

输出：

JavaScript 本地存储