Helpex - Trao đổi & giúp đỡ Đăng nhập
21

Tôi đang cố gắng làm việc với bộ nhớ cục bộ với các biểu mẫu sử dụng html5. Tôi chỉ không thể tìm thấy một bản demo hoạt động trực tuyến. Bất cứ ai có thể tìm cho tôi một bản demo tốt và một hướng dẫn hoạt động. Trình duyệt của tôi được hỗ trợ hoàn toàn.

Đánh giá cao tất cả sự giúp đỡ. Cảm ơn

21 hữu ích 0 bình luận 58k xem chia sẻ
3

Hãy xem MDC - DOM Storage hoặc bản nháp Webstorage của W3C (ok, ít bản demo hơn và nhiều mô tả hơn). Nhưng API không quá lớn.

3 hữu ích 0 bình luận chia sẻ
33

Đây là bản demo jsfiddle

(bản sao của mã js liên quan, việc sử dụng localStorage được gọi ra trong các nhận xét)

//Note that if you are writing a userscript, it is a good idea
// to prefix your keys, to reduce the risk of collisions with other 
// userscripts or the page itself.
var prefix = "localStorageDemo-";

$("#save").click(function () { 
    var key = $("#key").attr('value');
    var value = $("#value").attr('value');
    localStorage.setItem(prefix + key, value);      //******* setItem()
    //localStorage[prefix+key] = value; also works
    RewriteFromStorage();
});

function RewriteFromStorage() {
    $("#data").empty();
    for(var i = 0; i < localStorage.length; i++)    //******* length
    {
        var key = localStorage.key(i);              //******* key()
        if(key.indexOf(prefix) == 0) {
            var value = localStorage.getItem(key);  //******* getItem()
            //var value = localStorage[key]; also works
            var shortkey = key.replace(prefix, "");
            $("#data").append(
                $("<div class='kvp'>").html(shortkey + "=" + value)
                   .append($("<input type='button' value='Delete'>")
                           .attr('key', key)
                           .click(function() {      //****** removeItem()
                                localStorage.removeItem($(this).attr('key'));
                                RewriteFromStorage();
                            })
                          )
            );
        }
    }
}

RewriteFromStorage();
33 hữu ích 2 bình luận chia sẻ
7

Đây là một ví dụ về LocalStorage của HTML5.

Đây là ví dụ demo mã fiddle http://jsfiddle.net/ccatto/G2SyC/2/ .

Một mã đơn giản sẽ là:

// saving data into local storage
localStorage.setItem('LocalStorageKey', txtboxFooValue);

// getting data from localstorage
var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);

Đây là một ví dụ mã hoàn chỉnh hơn, nơi bạn nhập văn bản vào hộp văn bản và nhấp vào một nút. Sau đó, văn bản được lưu trữ vào LocalStorage và được truy xuất và hiển thị trong một div.

<h2>HTML LocalStorage Example</h2>

<section>
    <article>
        Web Storage example:
        <br />
        <div id="divDataLocalStorage"></div>
        <br />
        Value
        <input type="text" id="txtboxFooExampleLocalStorage" />
        <input type="button" id="btnSaveToLocalStorage" value="Save Text to Local Storage" />
    </article>
</section>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">    
    console.log("start log");  
    $("#btnSaveToLocalStorage").click(function () {
        console.log("inside btnSaveToLocalStorage Click function");
        SaveToLocalStorage();
    });

    function SaveToLocalStorage(){
        console.log("inside SaveToLocalStorage function");
        var txtboxFooValue = $("#txtboxFooExampleLocalStorage").val();
        console.log("text box Foo value  = ", txtboxFooValue);
        localStorage.setItem('LocalStorageKey', txtboxFooValue);
        console.log(" after setItem in LocalStorage");
        RetrieveFromLocalStorage();
    }

    function RetrieveFromLocalStorage() {
        console.log("inside Retrieve from LocalStorage");
        var retrivedValue = 'None';
        var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);
        $("#divDataLocalStorage").text(retrivedValue);
        console.log("inside end of retrieve from localstorge");
        console.log("retrieved value = ", retrivedValue);
    }

</script>

Hi vọng điêu nay co ich!

7 hữu ích 4 bình luận chia sẻ
2

Local Storage là một phần của HTML5 API - nó là một đối tượng và chúng ta có thể truy cập đối tượng này và chức năng của nó thông qua JavaScript. Trong hướng dẫn này, chúng tôi sẽ sử dụng JavaScript để xem xét các nguyên tắc cơ bản của đối tượng lưu trữ cục bộ và cách chúng tôi có thể lưu trữ và truy xuất dữ liệu, phía máy khách.

Các mục lưu trữ cục bộ được đặt theo cặp khóa / giá trị, vì vậy đối với mọi mục mà chúng tôi muốn lưu trữ trên máy khách (thiết bị của người dùng cuối), chúng tôi cần một khóa — khóa này phải liên quan trực tiếp đến dữ liệu mà nó được lưu trữ cùng.

Có nhiều phương thức và một thuộc tính quan trọng mà chúng tôi có quyền truy cập, vì vậy hãy bắt đầu.

Bạn sẽ nhập mã này vào tài liệu HTML5, bên trong các thẻ tập lệnh của bạn.

Thiết lập các mục

Đầu tiên, chúng ta có phương thức setItem (), lấy cặp khóa / giá trị (hoặc đôi khi được gọi là tên / giá trị) làm đối số. Phương pháp này rất quan trọng, vì nó sẽ cho phép chúng tôi thực sự lưu trữ dữ liệu trên máy khách; phương thức này không có giá trị trả về cụ thể. Phương thức setItem () trông giống như sau:

localStorage.setItem("Name", "Vamsi");

Nhận các mặt hàng

Bây giờ chúng ta đã xem xét việc lưu trữ một số dữ liệu, hãy lấy một số dữ liệu đã xác định đó ra khỏi bộ nhớ cục bộ. Để thực hiện việc này, chúng ta có phương thức getItem (), phương thức này nhận một khóa làm đối số và trả về giá trị chuỗi được liên kết với nó:

localStorage.getItem("Name");

Loại bỏ các mục

Một phương thức khác được chúng tôi quan tâm là phương thức removeItem (). Phương pháp này sẽ xóa các Mục khỏi bộ nhớ cục bộ (chúng ta sẽ nói thêm một chút về 'làm trống' bộ nhớ cục bộ sau). Phương thức removeItem () nhận một khóa làm đối số và sẽ xóa giá trị được liên kết với khóa đó. Nó trông giống như thế này:

localStorage.removeItem("Name");

Đây là ví dụ mẫu.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Local Storage</title>
        <script>
            localStorage.setItem("Name", "Vamsi");
            localStorage.setItem("Job", "Developer");
            localStorage.setItem("Address", "123 html5 street");
            localStorage.setItem("Phone", "0123456789");
            console.log(localStorage.length);
            console.log(localStorage.getItem("Name"));
            localStorage.clear();
            console.log(localStorage.length);
        </script>
    </head>
    <body>
    </body>
</html>
2 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript html local-storage demo , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading