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 <[email protected]>
+ * Copyright (c) 2020-2022, Andreas Kling <[email protected]>
  * Copyright (c) 2021, Sam Atkins <[email protected]>
  *
  * 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 <[email protected]>
+ * Copyright (c) 2020-2022, Andreas Kling <[email protected]>
  * Copyright (c) 2021, Sam Atkins <[email protected]>
  *
  * SPDX-License-Identifier: BSD-2-Clause
@@ -94,6 +94,8 @@ class WindowObject
  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 <[email protected]>
+ * Copyright (c) 2021-2022, Andreas Kling <[email protected]>
  *
  * 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 <[email protected]>
+ * Copyright (c) 2020-2022, Andreas Kling <[email protected]>
  * Copyright (c) 2021, Sam Atkins <[email protected]>
  *
  * 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 <[email protected]>
+ * Copyright (c) 2020-2022, Andreas Kling <[email protected]>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -98,6 +98,8 @@ class Window final
 
  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 <[email protected]>
+ * Copyright (c) 2020-2022, Andreas Kling <[email protected]>
  * 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 <[email protected]>
+ *
+ * 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 <[email protected]>
+ *
+ * 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();
+
+};