如何在本地浏览器中存储数据并从中检索回来

how to store data in local browser & retrieve back from it

本文关键字：数据 检索 回来 存储 浏览器      更新时间：2023-09-26

我在下面有json数据，我想将这些数据存储在浏览器中，最后，如果用户从文本框请求这些数据，我想从浏览器中取回这些数据。怎么做这些东西？

实际上，我是一名服务器端程序员，这是我的第二个javascript/jquery演示示例。我基本上是在创建演示的帮助下尝试学习这些东西。请帮助我学习。

我有通过调用远程网站获得的杰森数据（例如。 www.google.com/finance/.... ）

{
    "list": {
        "meta": {
            "type": "resource-list",
            "start": 0,
            "count": 168
        },
        "resources": [{
                "resource": {
                    "classname": "Quote",
                    "fields": {
                        "name": "USD/KRW",
                        "price": "1062.280029",
                        "symbol": "KRW=X",
                        "ts": "1396294510",
                        "type": "currency",
                        "utctime": "2014-03-31T19:35:10+0000",
                        "volume": "0"
                    }
                }
            }, {
                "resource": {
                    "classname": "Quote",
                    "fields": {
                        "name": "SILVER 1 OZ 999 NY",
                        "price": "0.050674",
                        "symbol": "XAG=X",
                        "ts": "1396287757",
                        "type": "currency",
                        "utctime": "2014-03-31T17:42:37+0000",
                        "volume": "217"
                    }
                }
            }

        ]
    }
}

使用 jQuery 和 Localstorage，你可以做到：

设置项目：

localStorage.setItem('myJSON',yourJSONString);

删除项目：

localStorage.removeItem('myJSON');

获取项目：

var JSONString = localStorage.getItem('myJSON');

有几种类型的浏览器存储，例如 localStorage，它们都是内置的，可以直接使用。

存储对象是该标准的最新补充。因此，它们可能并不存在于所有浏览器中......可以保存的最大数据大小受到使用 Cookie 的严格限制。

代码示例： 

  function storeMyContact(id) {
    var fullname    = document.getElementById('fullname').innerHTML;
    var phone       = document.getElementById('phone').innerHTML;
    var email       = document.getElementById('email').innerHTML;
    localStorage.setItem('mcFull',fullname);
    localStorage.setItem('mcPhone',phone);
    localStorage.setItem('mcEmail',email);
  }

另一方面，localStorage可能还不够，因此，外部库实际上利用了内置的浏览器，并使数据库跨浏览器工作。

1-SQL像DB续集（看起来适合繁重的工作！

将直接从浏览器运行的查询的代码示例：

SELECT empl_id, name, age 
  FROM empl 
 WHERE age < 30

2-像DB taffydb这样的JSON（看起来适合每天的活动！

// Create DB and fill it with records
var friends = TAFFY([
    {"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA","status":"Active"},
    {"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX","status":"Active"},
    {"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C.","status":"Active"},
    {"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"}   
]);
   // Find all the friends in Seattle
   friends({city:"Seattle, WA"});

3-jStorage是一个跨浏览器的键值存储数据库，用于在浏览器中本地存储数据 - jStorage支持所有主流浏览器，无论是桌面浏览器（是的 - 甚至是Internet Explorer 6）还是移动设备。

如果你想有更多的选择 ->（客户端浏览器数据库）

相关文章：