Question

我有这两页

第1页：

<!DOCTYPE html>
<html>
<head>
    <title>page 1</title>
</head>
<body>
<input id="button" type="submit" value="Submit" onclick="save();"/>
<div id ="stat"></div>


<script type="text/javascript">

    var x=1 ;
    var test = document.getElementById("stat");
    function save() {
        x+=1;
        test.innerHTML=x;
        localStorage.setItem("value",x);
}
</script>
</body>
</html>

第2页：

<!DOCTYPE html>
<html>
<head>
    <title>page 2</title>
</head>
<body>
<div id ="stat"></div>

<script type="text/javascript">

var stat = document.getElementById("stat");
document.addEventListener('storage', function(e) {
        stat.innerHTML=localStorage.getItem("value");
    }, false);
</script>
</body>
</html>

我想做的是

在浏览器的两个不同标签（或窗口）上打开Page 1和Page 2。
转到Page 1
单击按钮。

Page 1

值已更新。此外，Page 2中的值也会同时更新。
单击该按钮几次并获得相同的行为。

我进行了一些搜索，然后想到了使用本地存储的方法，但这是行不通的。我该如何实现？

Answer 1

正如这里https://www.w3schools.com/html/html5_webstorage.asp所说：

Web存储按来源（按域和协议）进行。所有页面都来自一个来源，可以存储和访问相同的数据。

因此，两个离线网页无法共享相同的本地存储。它们必须从同一域中打开。一种方法是从本地主机Web服务器打开它们。然后它将完美运行。

Answer 2

假设您正在浏览器环境中谈论此js（与其他诸如nodejs之类的js不同），不幸的是，我认为您尝试做的事情不可能仅仅是因为这不是应该的工作方式。

HTML页面通过HTTP协议（一种“无状态”协议）传递到浏览器。如果仍然需要在页面之间传递值，则可以采用3种方法：

会话Cookie
HTML5 LocalStorage
在网址中发布变量，然后通过窗口对象在next.html中检索它们

Answer 3

我认为当其他页面设置数据时，不会通知您的页面。我很高兴被证明是错误的。同时，尝试以下操作：

___________________ TestDataFileList.test_create_data_file ____________________

self = <test.test_api.TestDataFileList testMethod=test_create_data_file>
fs_save_mock = <MagicMock name='save' id='268959928'>

    @patch.object(FileStorage, 'save')
    def test_create_data_file(self, fs_save_mock):
        """Test creation/upload of a data data file."""
        file_storage = FileStorage(
            name='Test Storage', filename='teststorage.ext')
        data = {'file': file_storage}

>       rv = self.client.post('/api/data/upload', data=data)

test\test_api.py:469:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
..\venv\lib\site-packages\werkzeug\test.py:840: in post
    return self.open(*args, **kw)
..\venv\lib\site-packages\flask\testing.py:192: in open
    environ = builder.get_environ()
..\venv\lib\site-packages\werkzeug\test.py:588: in get_environ
    stream_encode_multipart(values, charset=self.charset)
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

values = [<FileStorage: 'teststorage.ext' (None)>], use_tempfile = True
threshold = 512000
boundary = '---------------WerkzeugFormPart_1534924385.40363360.05943907979559804'
charset = 'utf-8'

    def stream_encode_multipart(values, use_tempfile=True, threshold=1024 * 500,
                                boundary=None, charset='utf-8'):
        """Encode a dict of values (either strings or file descriptors or
        :class:`FileStorage` objects.) into a multipart encoded string stored
        in a file descriptor.
        """
        if boundary is None:
            boundary = '---------------WerkzeugFormPart_%s%s' % (time(), random())
        _closure = [BytesIO(), 0, False]

        if use_tempfile:
            def write_binary(string):
                stream, total_length, on_disk = _closure
                if on_disk:
                    stream.write(string)
                else:
                    length = len(string)
                    if length + _closure[1] <= threshold:
                        stream.write(string)
                    else:
                        new_stream = TemporaryFile('wb+')
                        new_stream.write(stream.getvalue())
                        new_stream.write(string)
                        _closure[0] = new_stream
                        _closure[2] = True
                    _closure[1] = total_length + length
        else:
            write_binary = _closure[0].write

        def write(string):
            write_binary(string.encode(charset))

        if not isinstance(values, MultiDict):
            values = MultiDict(values)

        for key, values in iterlists(values):
            for value in values:
                write('--%s\r\nContent-Disposition: form-data; name="%s"' %
                      (boundary, key))
                reader = getattr(value, 'read', None)
                if reader is not None:
                    filename = getattr(value, 'filename',
                                       getattr(value, 'name', None))
                    content_type = getattr(value, 'content_type', None)
                    if content_type is None:
                        content_type = filename and \
                            mimetypes.guess_type(filename)[0] or \
                            'application/octet-stream'
                    if filename is not None:
                        write('; filename="%s"\r\n' % filename)
                    else:
                        write('\r\n')
                    write('Content-Type: %s\r\n\r\n' % content_type)
                    while 1:
>                       chunk = reader(16384)
E                       ValueError: I/O operation on closed file.

..\venv\lib\site-packages\werkzeug\test.py:96: ValueError
===================== 1 failed, 31 passed in 3.89 seconds =====================

Answer 4

尝试以下代码：在first.html

function testJS() {
    var b = document.getElementById('name').value,
        url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);

    document.location.href = url;
}

在next.html中：

window.onload = function () {
    var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }
    document.getElementById('here').innerHTML = data.name;
}

说明：javascript无法在不同页面之间共享数据，因此我们必须使用一些解决方案，例如URL获取参数（以这种方式使用我的代码），cookie，localStorage等。将name参数存储在URL（？name = ...）和next.html解析URL中，并从上一页获取所有参数。

更新其他页面上的数据

4 个答案: