1. Introduction to Web local storage

1.SessionStorage and LocalStorage are both local browser Storage, collectively known as Web Storage. The Storage size generally supports 5-10MB

2. The browser uses window. sessionStorage and window. localStorage to implement the localStorage mechanism.

3. SessionStorage: Maintains a storage area for each data source that exists during browser opening, including page reloading

LocalStorage (long term storage) : same as sessionStorage, but data will still exist after the browser is closed

2. LocalStorage/sessionStorage (both are basically the same)

1, storage,

window.xxxStorage.setItem(key, value)

xxxStorage.key = value

2, get

window.xxxStorage.getItem(key)

xxxStorage.key

3. Delete certain data

window.xxxStorage.removeItem(key)

4. Delete all data

window.xxxStorage.clear()

5. Length attributes

window.xxxStorage.length

6. Return the name of the NTH key in the storage object.

window.xxxStorage.key(n)

Case in point: message boards

  • demo.css
* {
     margin: 0 auto;
     padding: 0;
     font-family: "Microsoft YaHei"."sans-serif";
}

.container {
     margin-top: 20px;
}

.btn {
     padding: 5px 10px;
}

.messageList {
     position: relative;
}

.messageList .delete_item {
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
     padding: 5px 10px;
}
Copy the code
  • demo.js
$(function () {
    / / submit
    $(".btn-box .submit").click(function () {
        var _name = $(".name").val(),
            _msg = $(".message").val();
        if(! _name || ! _msg) { alert('Please enter information')}else {
            localStorage.setItem(_name, _msg);
            $(".name, .message").val(' '); // Clear the datalistShow(); }});/ / check
    $(".btn-box .viewMes").click(function () {
        listShow();
    })

    // Delete all messages
    $(".btn-box .deleteAll").click(function () {$(".messageList").html("");
        localStorage.clear(); $(})".messageList").on("click".".delete_item".function () {$(this).parent().remove();
        localStorage.removeItem($(this).parent().children(".key").text());
    });

    // List display
    function listShow() {
        var str = ' ';
        for (var i = 0; i < localStorage.length; i++) {
            var _key = localStorage.key(i), / / get the key
                _value = localStorage.getItem(_key); // Get value by key
            str += '<li class="list-group-item"><span class="key">' + _key +
                 + _value + '< / span > < button class = "delete_item" > delete < / button > < / li >';
        };
        $(".messageList").html(str); }})Copy the code
  • index.html
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="Js/jquery - 1.11.0. Min. Js." "></script>
<script type="text/javascript" src="js/demo.js"></script>

<div class="container">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-1 control-label">Nickname:</label>
            <div class="col-sm-11">
                <input type="email" class="form-control name" id="inputEmail3" placeholder="Please enter a nickname">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">Message:</label>
            <div class="col-sm-11">
                <textarea class="form-control message" rows="5" placeholder="Please enter the content"></textarea>
            </div>
        </div>
        <div class="form-group btn-box">
            <div class="col-sm-offset-1 col-sm-11">
                <button type="submit" class="btn btn-success submit">Submit a message</button>
                <button class="btn btn-primary viewMes">See the message</button>
                <button class="btn btn-danger deleteAll">Delete the message</button>
            </div>
        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">The message list</div>
        <div class="panel-body">
            <ul class="list-group messageList">
                <! <span> <span> <span> </li> -->
            </ul>
        </div>
    </div>
</div>
Copy the code

3. How to implement browser communication across the page – localStorage + storage event (key!)

1. Storage events:

1) Triggered when the Storage object changes (i.e. storage.clear () is triggered only once when a data item is created/updated/deleted)

2) Changes made within the same page will not work

3) Changes made to other pages under the same domain name will only take effect. (Modified pages do not trigger events, but shared pages do)

4) Event Attributes of the event object

Key: Changed or deleted key value, null if clear() is called

NewValue: The newly set value, null if clear() is called

OldValue: The value before the change, or null if clear() is called

Url: The URL of the document that triggered the script change

StorageArea: indicates the current storage object

2. Usage:

window.addEventListener('storage'.function (event) {
    // Write the specific business logic here
})
Copy the code

Example: Data synchronization in multiple page input boxes

  • index1.html
<input type="text" id="input">
<script type="text/javascript">
    let input = document.getElementById('input')
    input.onblur = function () {
        localStorage.setItem('demo', input.value)
    }
</script>
Copy the code
  • index2.html
<input type="text" id="input">
<script type="text/javascript">
    let input = document.getElementById('input')
    window.addEventListener('storage'.function (event) {
      console.log(event)
      input.value = event.newValue
    })
</script>
Copy the code