JavaScript LocalStorage储存和读取

设置数据：

arr = [1,2,3,4,5,6,7,8,9];

localStorage.setItem('array', JSON.stringify(arr));

取出数据：

localStorage.getItem('array');

 

 

实例：

添加数据保存后，提交到LocalStorage储存刷新页面读取LocalStorage数据显示在页面。

 

<!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>this is document LocalStorage.</title>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementsByTagName('button');
            var input  = document.getElementsByTagName('input')[0];
            var container = document.getElementsByClassName('container')[0];
            var arr = [];
            // 获取localstorage的数据
            var items = localStorage.getItem==null?[]:JSON.parse(localStorage.getItem('array'));
            if (items != null) {
                // 遍历数据加载到页面
                for (var i = 0; i < items.length; i ++) {
                    // i + 1 是因为json对象取出的数据下标是0开始显示...所以+1
                    container.innerHTML += "<li>"+ (i+1) + ":" + items[i] +"</li>";
                }
            } else {
                console.log("localStorage not have data.");
            }
            // 将值提交给数组 arr.
            btn[0].onclick = function () {
                arr.push(input.value);
                input.value = '';
            }
            // 以JSON字符串的形式储存到localstorage.
            btn[1].onclick = function () {
                localStorage.setItem('array', JSON.stringify(arr));
                location.reload();
            }
        }
    </script>
</head>
<body>
    <input type="text" value="">
    <button type="button" name="button">提交数据到array</button>
    <button type="button" name="button">保存数据到LocalStorage</button>
    <div class="container"></div>
</body>
</html>

　　

posted @ 2018-04-27 15:56  MiraclesGG  阅读(1364)  评论(0)    收藏  举报