LibWeb: Add Storage interface and window.localStorage

This is a naive-but-somewhat-functional initial implementation of
HTML Storage.

Note that there is no persistence yet, everything is in-process only,
and one local Storage object per origin.

Userland/Libraries/LibWeb/Bindings/WindowObject.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -32,6 +32,7 @@
 #include <LibWeb/Bindings/Replaceable.h>
 #include <LibWeb/Bindings/ScreenWrapper.h>
 #include <LibWeb/Bindings/SelectionWrapper.h>
+#include <LibWeb/Bindings/StorageWrapper.h>
 #include <LibWeb/Bindings/WindowObject.h>
 #include <LibWeb/Bindings/WindowObjectHelper.h>
 #include <LibWeb/Crypto/Crypto.h>
@@ -42,6 +43,7 @@
 #include <LibWeb/HTML/EventHandler.h>
 #include <LibWeb/HTML/Scripting/ClassicScript.h>
 #include <LibWeb/HTML/Scripting/Environments.h>
+#include <LibWeb/HTML/Storage.h>
 #include <LibWeb/Origin.h>
 #include <LibWeb/Page/Page.h>
 #include <LibWeb/WebAssembly/WebAssemblyObject.h>
@@ -110,6 +112,8 @@ void WindowObject::initialize_global_object()
 
     define_direct_property("CSS", heap().allocate<CSSNamespace>(*this, *this), 0);
 
+    define_native_accessor("localStorage", local_storage_getter, {}, attr);
+
     // Legacy
     define_native_accessor("event", event_getter, event_setter, JS::Attribute::Enumerable);
 
@@ -646,6 +650,13 @@ JS_DEFINE_NATIVE_FUNCTION(WindowObject::screen_y_getter)
     return JS::Value(impl->screen_y());
 }
 
+JS_DEFINE_NATIVE_FUNCTION(WindowObject::local_storage_getter)
+{
+    auto* impl = TRY(impl_from(vm, global_object));
+    // FIXME: localStorage may throw. We have to deal with that here.
+    return wrap(global_object, *impl->local_storage());
+}
+
 #define __ENUMERATE(attribute, event_name)                                                                                 \
     JS_DEFINE_NATIVE_FUNCTION(WindowObject::attribute##_getter)                                                            \
     {                                                                                                                      \

Userland/Libraries/LibWeb/Bindings/WindowObject.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -94,6 +94,8 @@ private:
     JS_DECLARE_NATIVE_FUNCTION(screen_left_getter);
     JS_DECLARE_NATIVE_FUNCTION(screen_top_getter);
 
+    JS_DECLARE_NATIVE_FUNCTION(local_storage_getter);
+
     JS_DECLARE_NATIVE_FUNCTION(alert);
     JS_DECLARE_NATIVE_FUNCTION(confirm);
     JS_DECLARE_NATIVE_FUNCTION(prompt);

Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2021-2022, Andreas Kling <kling@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -263,6 +263,8 @@
 #include <LibWeb/Bindings/SelectionPrototype.h>
 #include <LibWeb/Bindings/ShadowRootConstructor.h>
 #include <LibWeb/Bindings/ShadowRootPrototype.h>
+#include <LibWeb/Bindings/StorageConstructor.h>
+#include <LibWeb/Bindings/StoragePrototype.h>
 #include <LibWeb/Bindings/StyleSheetConstructor.h>
 #include <LibWeb/Bindings/StyleSheetListConstructor.h>
 #include <LibWeb/Bindings/StyleSheetListPrototype.h>
@@ -424,6 +426,7 @@
     ADD_WINDOW_OBJECT_INTERFACE(Screen)                    \
     ADD_WINDOW_OBJECT_INTERFACE(Selection)                 \
     ADD_WINDOW_OBJECT_INTERFACE(ShadowRoot)                \
+    ADD_WINDOW_OBJECT_INTERFACE(Storage)                   \
     ADD_WINDOW_OBJECT_INTERFACE(StyleSheet)                \
     ADD_WINDOW_OBJECT_INTERFACE(StyleSheetList)            \
     ADD_WINDOW_OBJECT_INTERFACE(SubmitEvent)               \

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -196,6 +196,7 @@ set(SOURCES
     HTML/Scripting/ExceptionReporter.cpp
     HTML/Scripting/Script.cpp
     HTML/Scripting/WindowEnvironmentSettingsObject.cpp
+    HTML/Storage.cpp
     HTML/SyntaxHighlighter/SyntaxHighlighter.cpp
     HTML/TagNames.cpp
     HTML/TextMetrics.cpp
@@ -493,6 +494,7 @@ libweb_js_wrapper(HTML/MessageEvent)
 libweb_js_wrapper(HTML/MessagePort)
 libweb_js_wrapper(HTML/PageTransitionEvent)
 libweb_js_wrapper(HTML/PromiseRejectionEvent)
+libweb_js_wrapper(HTML/Storage)
 libweb_js_wrapper(HTML/SubmitEvent)
 libweb_js_wrapper(HTML/TextMetrics)
 libweb_js_wrapper(HTML/WebSocket)

Userland/Libraries/LibWeb/DOM/Window.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -21,6 +21,7 @@
 #include <LibWeb/HTML/EventLoop/EventLoop.h>
 #include <LibWeb/HTML/PageTransitionEvent.h>
 #include <LibWeb/HTML/Scripting/ExceptionReporter.h>
+#include <LibWeb/HTML/Storage.h>
 #include <LibWeb/HighResolutionTime/Performance.h>
 #include <LibWeb/Layout/InitialContainingBlock.h>
 #include <LibWeb/Page/Page.h>
@@ -438,4 +439,15 @@ Selection::Selection* Window::get_selection()
     return nullptr;
 }
 
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage
+RefPtr<HTML::Storage> Window::local_storage()
+{
+    // FIXME: Implement according to spec.
+
+    static HashMap<Origin, NonnullRefPtr<HTML::Storage>> local_storage_per_origin;
+    return local_storage_per_origin.ensure(associated_document().origin(), [] {
+        return HTML::Storage::create();
+    });
+}
+
 }

Userland/Libraries/LibWeb/DOM/Window.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -98,6 +98,8 @@ public:
 
     Selection::Selection* get_selection();
 
+    RefPtr<HTML::Storage> local_storage();
+
 private:
     explicit Window(Document&);
 

Userland/Libraries/LibWeb/Forward.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  * Copyright (c) 2021, the SerenityOS developers.
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -213,6 +213,7 @@ class MessageEvent;
 class MessagePort;
 class PageTransitionEvent;
 class PromiseRejectionEvent;
+class Storage;
 class SubmitEvent;
 class TextMetrics;
 class WebSocket;
@@ -440,6 +441,7 @@ class RangeWrapper;
 class ResizeObserverWrapper;
 class ScreenWrapper;
 class SelectionWrapper;
+class StorageWrapper;
 class StyleSheetListWrapper;
 class StyleSheetWrapper;
 class SubmitEventWrapper;

Userland/Libraries/LibWeb/HTML/Storage.cpp

@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <AK/String.h>
+#include <LibWeb/HTML/Storage.h>
+
+namespace Web::HTML {
+
+NonnullRefPtr<Storage> Storage::create()
+{
+    return adopt_ref(*new Storage);
+}
+
+Storage::Storage()
+{
+}
+
+Storage::~Storage()
+{
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-length
+size_t Storage::length() const
+{
+    // The length getter steps are to return this's map's size.
+    return m_map.size();
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-key
+String Storage::key(size_t index)
+{
+    // 1. If index is greater than or equal to this's map's size, then return null.
+    if (index >= m_map.size())
+        return {};
+
+    // 2. Let keys be the result of running get the keys on this's map.
+    auto keys = m_map.keys();
+
+    // 3. Return keys[index].
+    return keys[index];
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-getitem
+String Storage::get_item(String const& key) const
+{
+    // 1. If this's map[key] does not exist, then return null.
+    auto it = m_map.find(key);
+    if (it == m_map.end())
+        return {};
+
+    // 2. Return this's map[key].
+    return it->value;
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-setitem
+DOM::ExceptionOr<void> Storage::set_item(String const& key, String const& value)
+{
+    // 1. Let oldValue be null.
+    String old_value;
+
+    // 2. Let reorder be true.
+    bool reorder = true;
+
+    // 3. If this's map[key] exists:
+    if (auto it = m_map.find(key); it != m_map.end()) {
+        // 1. Set oldValue to this's map[key].
+        old_value = it->value;
+
+        // 2. If oldValue is value, then return.
+        if (old_value == value)
+            return {};
+
+        // 3. Set reorder to false.
+        reorder = false;
+    }
+
+    // FIXME: 4. If value cannot be stored, then throw a "QuotaExceededError" DOMException exception.
+
+    // 5. Set this's map[key] to value.
+    m_map.set(key, value);
+
+    // 6. If reorder is true, then reorder this.
+    if (reorder)
+        this->reorder();
+
+    // 7. Broadcast this with key, oldValue, and value.
+    broadcast(key, old_value, value);
+
+    return {};
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-removeitem
+void Storage::remove_item(String const& key)
+{
+    // 1. If this's map[key] does not exist, then return null.
+    // FIXME: Return null?
+    auto it = m_map.find(key);
+    if (it == m_map.end())
+        return;
+
+    // 2. Set oldValue to this's map[key].
+    auto old_value = it->value;
+
+    // 3. Remove this's map[key].
+    m_map.remove(it);
+
+    // 4. Reorder this.
+    reorder();
+
+    // 5. Broadcast this with key, oldValue, and null.
+    broadcast(key, old_value, {});
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-clear
+void Storage::clear()
+{
+    // 1. Clear this's map.
+    m_map.clear();
+
+    // 2. Broadcast this with null, null, and null.
+    broadcast({}, {}, {});
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#concept-storage-reorder
+void Storage::reorder()
+{
+    // To reorder a Storage object storage, reorder storage's map's entries in an implementation-defined manner.
+    // NOTE: This basically means that we're not required to maintain any particular iteration order.
+}
+
+// https://html.spec.whatwg.org/multipage/webstorage.html#concept-storage-broadcast
+void Storage::broadcast(String const& key, String const& old_value, String const& new_value)
+{
+    (void)key;
+    (void)old_value;
+    (void)new_value;
+    // FIXME: Implement.
+}
+
+Vector<String> Storage::supported_property_names() const
+{
+    // The supported property names on a Storage object storage are the result of running get the keys on storage's map.
+    return m_map.keys();
+}
+
+}

Userland/Libraries/LibWeb/HTML/Storage.h

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <AK/HashMap.h>
+#include <AK/RefCounted.h>
+#include <LibWeb/Bindings/Wrappable.h>
+#include <LibWeb/DOM/ExceptionOr.h>
+#include <LibWeb/Forward.h>
+
+namespace Web::HTML {
+
+class Storage
+    : public RefCounted<Storage>
+    , public Bindings::Wrappable {
+public:
+    using WrapperType = Bindings::StorageWrapper;
+
+    static NonnullRefPtr<Storage> create();
+    ~Storage();
+
+    size_t length() const;
+    String key(size_t index);
+    String get_item(String const& key) const;
+    DOM::ExceptionOr<void> set_item(String const& key, String const& value);
+    void remove_item(String const& key);
+    void clear();
+
+    Vector<String> supported_property_names() const;
+
+private:
+    Storage();
+
+    void reorder();
+    void broadcast(String const& key, String const& old_value, String const& new_value);
+
+    OrderedHashMap<String, String> m_map;
+};
+
+}
+
+namespace Web::Bindings {
+
+StorageWrapper* wrap(JS::GlobalObject&, HTML::Storage&);
+
+}

Userland/Libraries/LibWeb/HTML/Storage.idl

@@ -0,0 +1,11 @@
+[Exposed=Window]
+interface Storage {
+
+    readonly attribute unsigned long length;
+    DOMString? key(unsigned long index);
+    getter DOMString? getItem(DOMString key);
+    setter undefined setItem(DOMString key, DOMString value);
+    deleter undefined removeItem(DOMString key);
+    undefined clear();
+
+};