Add example page

modestfake · Sep 2, 2019 · f2f99b8 · f2f99b8
1 parent 52b37ec
commit f2f99b8
Show file tree

Hide file tree

Showing 8 changed files with 3,693 additions and 173 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
+.cache
 node_modules
 coverage
+dist
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+.cache
+.coverage
+.travis.yml
diff --git a/README.md b/README.md
@@ -40,3 +40,12 @@ You can pass the following properties to `options`:
 | Name           | Type   | Default                                                                      | Description                                                                |
 | -------------- | ------ | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
 | `errorMessage` | String | Looks like you've disabled \<StorageType\>. Enable it to avoid this warning. | Error message printed to the browser console when storage is not available |
+
+## Development
+
+To test the library in a browser run:
+
+```bash
+npm install
+npm start
+```
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Test storage</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/example/script.js b/example/script.js
@@ -0,0 +1,23 @@
+import { createSafeLocalStorage, createSafeSessionStorage } from '../src'
+
+const safeLocaleStorage = createSafeLocalStorage()
+const safeSessionStorage = createSafeSessionStorage()
+
+function renderStorageData(storage) {
+  return `
+    <section>
+      <h2>${storage._storageType}</h2>
+      <div>isNativeStorageUsed: <em>${storage.isNativeStorageUsed}</em></div>
+      <div>isInMemoryStorageUsed: <em>${storage.isInMemoryStorageUsed}</em></div>
+    </section>
+  `
+}
+
+function renderApp() {
+  const html =
+    renderStorageData(safeLocaleStorage) + renderStorageData(safeSessionStorage)
+
+  document.getElementById('root').innerHTML = html
+}
+
+renderApp()