56 строки
1.8 KiB
HTML
Executable File
56 строки
1.8 KiB
HTML
Executable File
---
|
|
feature_name: IndexedDB Observers
|
|
chrome_version: 57
|
|
feature_id: 5669292892749824
|
|
---
|
|
|
|
<style>
|
|
#data, #name {
|
|
background-color: #C8E6C9;
|
|
font-size: 2em;
|
|
padding: 0 .5em;
|
|
}
|
|
</style>
|
|
|
|
<h3>Background</h3>
|
|
<p>IndexedDB Observers allow one to observe changes to indexeddb in an
|
|
efficient and data-consistant way. Open this page in multiple tabs or windows,
|
|
and observe how the data consistantly updates. See <a href="https://github.com/WICG/indexed-db-observers/blob/gh-pages/EXPLAINER.md">this
|
|
explainer</a> for more info and the proposed specification changes.</a></p>
|
|
<p>Note that you must be using Chrome 57+ with the <code>#enable-experimental-web-platform-features</code> flag enabled.</p>
|
|
|
|
<h4>
|
|
Tab Name: <span id="name"></span>
|
|
Data number: <span id="data"></span>
|
|
</h4>
|
|
|
|
<button id="incrementButton">Increment Data Number</button>
|
|
<button id="resetButton">Reset Data Number</button>
|
|
|
|
{% capture initial_output_content %}
|
|
<pre>Database changes appear here:</pre>
|
|
{% endcapture %}
|
|
{% include output_helper.html initial_output_content=initial_output_content%}
|
|
|
|
{% include js_snippet.html filename='demo.js' %}
|
|
|
|
<script>
|
|
(function() {
|
|
var names = ['Toby', 'Fred', 'George', 'Bob', 'Bill', 'Buster',
|
|
'Jenn', 'Zoe', 'Carla', 'Stacy', 'Alyssa', 'Catherine',
|
|
'Sally', 'Austin', 'Jackson', 'Grace',
|
|
'Tasha', 'Arthur', 'Michael', 'Echo', 'Topher', 'Sierra',
|
|
'Whisky', 'DeWitt'];
|
|
document.querySelector('#name').textContent = names[Math.floor(
|
|
Math.random() * names.length)];
|
|
})();
|
|
|
|
document.querySelector('#incrementButton').addEventListener('click', function() {
|
|
onIncrementButtonClick();
|
|
});
|
|
|
|
document.querySelector('#resetButton').addEventListener('click', function() {
|
|
onResetButtonClick();
|
|
});
|
|
</script>
|