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

Tôi muốn lưu trữ một đối tượng JavaScript trong HTML5 localStorage, nhưng đối tượng của tôi rõ ràng đang được chuyển đổi thành một chuỗi.

Tôi có thể lưu trữ và truy xuất các loại và mảng JavaScript nguyên thủy bằng cách sử dụng localStorage, nhưng các đối tượng dường như không hoạt động. Họ nên?

Đây là mã của tôi:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

Đầu ra giao diện điều khiển là

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

Có vẻ như setItemphương thức này đang chuyển đổi đầu vào thành một chuỗi trước khi lưu trữ nó.

Tôi thấy hành vi này trong Safari, Chrome và Firefox, vì vậy tôi cho rằng đó là sự hiểu lầm của tôi về thông số lưu trữ web HTML5 , không phải là lỗi hoặc giới hạn dành riêng cho trình duyệt.

Tôi đã cố gắng hiểu ý nghĩa của thuật toán nhân bản có cấu trúc được mô tả trong http://www.w3.org/TR/html5/infr kia.html . Tôi không hoàn toàn hiểu những gì nó nói, nhưng có lẽ vấn đề của tôi liên quan đến các thuộc tính của đối tượng của tôi không được liệt kê (???)

Có một cách giải quyết dễ dàng?


Cập nhật: W3C cuối cùng đã thay đổi suy nghĩ của họ về đặc tả bản sao có cấu trúc và quyết định thay đổi thông số kỹ thuật để phù hợp với việc triển khai. Xem https://www.w3.org/Bugs/Public/show_orms.cgi?id=12111 . Vì vậy, câu hỏi này không còn hợp lệ 100%, nhưng câu trả lời vẫn có thể được quan tâm.

2237 hữu ích 5 bình luận 940k xem chia sẻ
25 trả lời 25
2870

Nhìn vào tài liệu của Apple , MozillaMicrosoft , chức năng dường như bị giới hạn chỉ xử lý các cặp khóa / giá trị chuỗi.

Một cách giải quyết có thể là xâu chuỗi đối tượng của bạn trước khi lưu trữ nó và sau đó phân tích cú pháp khi bạn truy xuất nó:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));
2870 hữu ích 5 bình luận chia sẻ
589

Một cải tiến nhỏ trên một biến thể :

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

Do đánh giá ngắn mạch , getObject()sẽ ngay lập tức quay lại nullnếu keykhông có trong Bộ lưu trữ. Nó cũng sẽ không ném SyntaxErrorngoại lệ nếu value""(chuỗi rỗng; JSON.parse()không thể xử lý điều đó).

589 hữu ích 5 bình luận chia sẻ
205

Bạn có thể thấy hữu ích khi mở rộng đối tượng Storage bằng các phương thức tiện dụng sau:

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

Bằng cách này, bạn có được chức năng mà bạn thực sự muốn mặc dù bên dưới API chỉ hỗ trợ các chuỗi.

205 hữu ích 3 bình luận chia sẻ
68

Mở rộng đối tượng Storage là một giải pháp tuyệt vời. Đối với API của tôi, tôi đã tạo một mặt tiền cho localStorage và sau đó kiểm tra xem nó có phải là một đối tượng hay không trong khi cài đặt và nhận.

var data = {
  set: function(key, value) {
    if (!key || !value) {return;}

    if (typeof value === "object") {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },
  get: function(key) {
    var value = localStorage.getItem(key);

    if (!value) {return;}

    // assume it is an object that has been stringified
    if (value[0] === "{") {
      value = JSON.parse(value);
    }

    return value;
  }
}
68 hữu ích 5 bình luận chia sẻ
59

Stringify không giải quyết tất cả các vấn đề

Dường như các câu trả lời ở đây không bao gồm tất cả các loại có thể có trong JavaScript, vì vậy đây là một số ví dụ ngắn về cách xử lý chúng một cách chính xác:

//Objects and Arrays:
    var obj = {key: "value"};
    localStorage.object = JSON.stringify(obj);  //Will ignore private members
    obj = JSON.parse(localStorage.object);
//Boolean:
    var bool = false;
    localStorage.bool = bool;
    bool = (localStorage.bool === "true");
//Numbers:
    var num = 42;
    localStorage.num = num;
    num = +localStorage.num;    //short for "num = parseFloat(localStorage.num);"
//Dates:
    var date = Date.now();
    localStorage.date = date;
    date = new Date(parseInt(localStorage.date));
//Regular expressions:
    var regex = /^No\.[\d]*$/i;     //usage example: "No.42".match(regex);
    localStorage.regex = regex;
    var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
    regex = new RegExp(components[1], components[2]);
//Functions (not recommended):
    function func(){}
    localStorage.func = func;
    eval( localStorage.func );      //recreates the function with the name "func"

Tôi không khuyên bạn nên lưu trữ các chức năng vì eval()điều ác có thể dẫn đến các vấn đề liên quan đến bảo mật, tối ưu hóa và gỡ lỗi. Nói chung, eval()không bao giờ nên được sử dụng trong mã JavaScript.

Thành viên tư nhân

Vấn đề với việc sử dụng JSON.stringify()để lưu trữ các đối tượng là, chức năng này không thể tuần tự hóa các thành viên riêng. Vấn đề này có thể được giải quyết bằng cách ghi đè .toString()phương thức (được gọi là ngầm khi lưu trữ dữ liệu trong bộ lưu trữ web):

//Object with private and public members:
    function MyClass(privateContent, publicContent){
        var privateMember = privateContent || "defaultPrivateValue";
        this.publicMember = publicContent  || "defaultPublicValue";

        this.toString = function(){
            return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
        };
    }
    MyClass.fromString = function(serialisedString){
        var properties = JSON.parse(serialisedString || "{}");
        return new MyClass( properties.private, properties.public );
    };
//Storing:
    var obj = new MyClass("invisible", "visible");
    localStorage.object = obj;
//Loading:
    obj = MyClass.fromString(localStorage.object);

Tài liệu tham khảo thông tư

Một vấn đề khác stringifykhông thể giải quyết là các tài liệu tham khảo vòng tròn:

var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj);  //Fails

Trong ví dụ này, JSON.stringify()sẽ đưa ra một TypeError "Chuyển đổi cấu trúc vòng tròn thành JSON" . Nếu lưu trữ tham chiếu tròn nên được hỗ trợ, tham số thứ hai JSON.stringify()có thể được sử dụng:

var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify( obj, function( key, value) {
    if( key == 'circular') {
        return "$ref"+value.id+"$";
    } else {
        return value;
    }
});

Tuy nhiên, việc tìm một giải pháp hiệu quả để lưu trữ các tham chiếu vòng tròn phụ thuộc nhiều vào các nhiệm vụ cần giải quyết và việc khôi phục dữ liệu đó cũng không phải là chuyện nhỏ.

Đã có một số câu hỏi về SO xử lý vấn đề này: Stringify (chuyển đổi thành JSON) một đối tượng JavaScript có tham chiếu vòng tròn

59 hữu ích 0 bình luận chia sẻ
52

Có một thư viện tuyệt vời bao bọc nhiều giải pháp để nó thậm chí còn hỗ trợ các trình duyệt cũ hơn được gọi là jStorage

Bạn có thể thiết lập một đối tượng

$.jStorage.set(key, value)

Và lấy nó dễ dàng

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
52 hữu ích 2 bình luận chia sẻ
33

Sử dụng các đối tượng JSON để lưu trữ cục bộ:

//BỘ

var m={name:'Hero',Title:'developer'};
localStorage.setItem('us', JSON.stringify(m));

//ĐƯỢC

var gm =JSON.parse(localStorage.getItem('us'));
console.log(gm.name);

// Lặp lại tất cả các khóa và giá trị lưu trữ cục bộ

for (var i = 0, len = localStorage.length; i < len; ++i) {
  console.log(localStorage.getItem(localStorage.key(i)));
}

// XÓA BỎ

localStorage.removeItem('us');
delete window.localStorage["us"];
33 hữu ích 0 bình luận chia sẻ
27

Về lý thuyết, có thể lưu trữ các đối tượng có chức năng:

function store (a)
{
  var c = {f: {}, d: {}};
  for (var k in a)
  {
    if (a.hasOwnProperty(k) && typeof a[k] === 'function')
    {
      c.f[k] = encodeURIComponent(a[k]);
    }
  }

  c.d = a;
  var data = JSON.stringify(c);
  window.localStorage.setItem('CODE', data);
}

function restore ()
{
  var data = window.localStorage.getItem('CODE');
  data = JSON.parse(data);
  var b = data.d;

  for (var k in data.f)
  {
    if (data.f.hasOwnProperty(k))
    {
      b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
    }
  }

  return b;
}

Tuy nhiên, tuần tự hóa / giải tuần tự hóa chức năng là không đáng tin cậy vì nó phụ thuộc vào việc thực hiện .

27 hữu ích 5 bình luận chia sẻ
22

Bạn cũng có thể ghi đè Bộ lưu trữ setItem(key,value)getItem(key)phương thức mặc định để xử lý các đối tượng / mảng như bất kỳ loại dữ liệu nào khác. Bằng cách đó, bạn có thể chỉ cần gọi localStorage.setItem(key,value)localStorage.getItem(key)như bạn thường làm.

Tôi đã không thử nghiệm điều này một cách rộng rãi, nhưng nó dường như hoạt động mà không gặp vấn đề gì đối với một dự án nhỏ mà tôi đã mày mò.

Storage.prototype._setItem = Storage.prototype.setItem;
Storage.prototype.setItem = function(key, value)
{
  this._setItem(key, JSON.stringify(value));
}

Storage.prototype._getItem = Storage.prototype.getItem;
Storage.prototype.getItem = function(key)
{  
  try
  {
    return JSON.parse(this._getItem(key));
  }
  catch(e)
  {
    return this._getItem(key);
  }
}
22 hữu ích 2 bình luận chia sẻ
21

Tôi đã đến bài đăng này sau khi nhấn vào một bài đăng khác đã bị đóng như là một bản sao của bài viết này - có tiêu đề 'làm thế nào để lưu trữ một mảng trong lưu trữ cục bộ?'. Sẽ tốt thôi, ngoại trừ chủ đề không thực sự cung cấp câu trả lời đầy đủ về cách bạn có thể duy trì một mảng trong localStorage - tuy nhiên tôi đã quản lý để tạo ra một giải pháp dựa trên thông tin có trong cả hai luồng.

Vì vậy, nếu bất cứ ai khác muốn có thể đẩy / pop / shift các mục trong một mảng và họ muốn mảng đó được lưu trữ trong localStorage hoặc thực sự là sessionStorage, thì bạn hãy vào đây:

Storage.prototype.getArray = function(arrayName) {
  var thisArray = [];
  var fetchArrayObject = this.getItem(arrayName);
  if (typeof fetchArrayObject !== 'undefined') {
    if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
  }
  return thisArray;
}

Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.push(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.popArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.pop();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.shiftArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.shift();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.unshift(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.deleteArray = function(arrayName) {
  this.removeItem(arrayName);
}

sử dụng ví dụ - lưu trữ các chuỗi đơn giản trong mảng localStorage:

localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');

sử dụng ví dụ - lưu trữ các đối tượng trong mảng sessionStorage:

var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);

var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);

Các phương pháp phổ biến để thao tác mảng:

.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage
21 hữu ích 1 bình luận chia sẻ
13

Đề nghị sử dụng thư viện trừu tượng cho nhiều tính năng được thảo luận ở đây cũng như khả năng tương thích tốt hơn. Rất nhiều lựa chọn:

13 hữu ích 0 bình luận chia sẻ
9

Tốt hơn là bạn tạo các hàm như setter và getter thành localStorage , bằng cách này bạn sẽ kiểm soát tốt hơn và sẽ không phải lặp lại phân tích cú pháp JSON và tất cả. nó thậm chí sẽ xử lý trơn tru ("") chuỗi khóa / trường hợp dữ liệu trống của bạn .

function setItemInStorage(dataKey, data){
    localStorage.setItem(dataKey, JSON.stringify(data));
}

function getItemFromStorage(dataKey){
    var data = localStorage.getItem(dataKey);
    return data? JSON.parse(data): null ;
}

setItemInStorage('user', { name:'tony stark' });
getItemFromStorage('user'); /* return {name:'tony stark'} */
9 hữu ích 0 bình luận chia sẻ
8

Tôi đã sửa đổi một trong những câu trả lời được bình chọn hàng đầu một chút. Tôi là một fan hâm mộ của chức năng duy nhất thay vì 2 nếu không cần thiết.

Storage.prototype.object = function(key, val) {
    if ( typeof val === "undefined" ) {
        var value = this.getItem(key);
        return value ? JSON.parse(value) : null;
    } else {
        this.setItem(key, JSON.stringify(val));
    }
}

localStorage.object("test", {a : 1}); //set value
localStorage.object("test"); //get value

Ngoài ra, nếu không có giá trị được thiết lập, nó trở về nullthay vì false. falsecó một số ý nghĩa, nullkhông.

8 hữu ích 1 bình luận chia sẻ
6

Cải thiện câu trả lời của @Guria:

Storage.prototype.setObject = function (key, value) {
    this.setItem(key, JSON.stringify(value));
};


Storage.prototype.getObject = function (key) {
    var value = this.getItem(key);
    try {
        return JSON.parse(value);
    }
    catch(err) {
        console.log("JSON parse failed for lookup of ", key, "\n error was: ", err);
        return null;
    }
};
6 hữu ích 0 bình luận chia sẻ
5

Bạn có thể sử dụng localDataStorage để lưu trữ trong suốt các kiểu dữ liệu javascript (Array, Boolean, Date, Float, Integer, String và Object). Nó cũng cung cấp mã hóa dữ liệu nhẹ, tự động nén chuỗi, tạo điều kiện truy vấn theo khóa (tên) cũng như truy vấn theo giá trị (khóa) và giúp thực thi lưu trữ được chia sẻ phân đoạn trong cùng một miền bằng các khóa tiền tố.

[TUYÊN BỐ TỪ CHỐI] Tôi là tác giả của tiện ích [/ TUYÊN BỐ TỪ CHỐI]

Ví dụ:

localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )

localDataStorage.get( 'key1' )   -->   'Belgian'
localDataStorage.get( 'key2' )   -->   1200.0047
localDataStorage.get( 'key3' )   -->   true
localDataStorage.get( 'key4' )   -->   Object {RSK: Array(5)}
localDataStorage.get( 'key5' )   -->   null

Như bạn có thể thấy, các giá trị nguyên thủy được tôn trọng.

5 hữu ích 1 bình luận chia sẻ
4

Một lựa chọn khác là sử dụng một plugin hiện có.

Ví dụ, Perso là một dự án nguồn mở cung cấp giao diện dễ dàng cho localStorage / sessionStorage và tự động hóa tính bền vững cho các trường biểu mẫu (đầu vào, nút radio và hộp kiểm).

Lưu trữ các đối tượng trong HTML5 localStorage?

(Tuyên bố miễn trừ trách nhiệm: Tôi là tác giả.)

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

Bạn có thể sử dụng ejson để lưu trữ các đối tượng dưới dạng chuỗi.

EJSON là một phần mở rộng của JSON để hỗ trợ nhiều loại hơn. Nó hỗ trợ tất cả các loại an toàn JSON, cũng như:

  • Ngày (JavaScript Date)
  • Nhị phân (JavaScript Uint8Arrayhoặc kết quả của EJSON.newBinary )
  • Các loại do người dùng xác định (xem EJSON.addType . Ví dụ: Mongo.ObjectID được triển khai theo cách này.)

Tất cả các tuần tự hóa EJSON cũng là JSON hợp lệ. Ví dụ: một đối tượng có ngày và bộ đệm nhị phân sẽ được tuần tự hóa trong EJSON như:

{
  "d": {"$date": 1358205756553},
  "b": {"$binary": "c3VyZS4="}
}

Đây là trình bao bọc localStorage của tôi bằng ejson

https://github.com/UziTech/st Storage.js

Tôi đã thêm một số loại vào trình bao bọc của mình, bao gồm các biểu thức và hàm thông thường

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

http://rhaboo.org là một lớp đường LocalStorage cho phép bạn viết những thứ như thế này:

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');

Nó không sử dụng JSON.opesify / parse vì điều đó sẽ không chính xác và chậm trên các đối tượng lớn. Thay vào đó, mỗi giá trị đầu cuối có mục nhập LocalStorage riêng.

Bạn có thể đoán rằng tôi có thể có liên quan đến rhaboo ;-)

Adrian.

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

Tôi đã tạo một trình bao bọc tối giản khác chỉ với 20 dòng mã để cho phép sử dụng nó như nó nên:

localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey');   // --> true
localStorage.get('myKey');   // --> {a:[1,2,5], b: 'ok'}
localStorage.keys();         // --> ['myKey']
localStorage.remove('myKey');

https://github.com/zevero/simpleWebst Storage

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

Đối với người dùng Bản in sẵn sàng đặt và nhận các thuộc tính được nhập:

/**
 * Silly wrapper to be able to type the storage keys
 */
export class TypedStorage<T> {

    public removeItem(key: keyof T): void {
        localStorage.removeItem(key);
    }

    public getItem<K extends keyof T>(key: K): T[K] | null {
        const data: string | null =  localStorage.getItem(key);
        return JSON.parse(data);
    }

    public setItem<K extends keyof T>(key: K, value: T[K]): void {
        const data: string = JSON.stringify(value);
        localStorage.setItem(key, data);
    }
}

Ví dụ sử dụng :

// write an interface for the storage
interface MyStore {
   age: number,
   name: string,
   address: {city:string}
}

const storage: TypedStorage<MyStore> = new TypedStorage<MyStore>();

storage.setItem("wrong key", ""); // error unknown key
storage.setItem("age", "hello"); // error, age should be number
storage.setItem("address", {city:"Here"}); // ok

const address: {city:string} = storage.getItem("address");
2 hữu ích 0 bình luận chia sẻ
1

Dưới đây là một số phiên bản mở rộng của mã được đăng bởi @danott

Nó cũng sẽ triển khai giá trị xóa khỏi bộ lưu trữ cục bộ và chỉ ra cách thêm lớp Getter và Setter thay vì

localstorage.setItem(preview, true)

bạn có thể viết

config.preview = true

Được rồi ở đây đã đi:

var PT=Storage.prototype

if (typeof PT._setItem >='u') PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
  if (typeof value >='u')//..ndefined
    this.removeItem(key)
  else
    this._setItem(key, JSON.stringify(value));
}

if (typeof PT._getItem >='u') PT._getItem = PT.getItem;
PT.getItem = function(key)
{  
  var ItemData = this._getItem(key)
  try
  {
    return JSON.parse(ItemData);
  }
  catch(e)
  {
    return ItemData;
  }
}

// Aliases for localStorage.set/getItem 
get =   localStorage.getItem.bind(localStorage)
set =   localStorage.setItem.bind(localStorage)

// Create ConfigWrapperObject
var config = {}

// Helper to create getter & setter
function configCreate(PropToAdd){
    Object.defineProperty( config, PropToAdd, {
      get: function ()      { return (  get(PropToAdd)      ) },
      set: function (val)   {           set(PropToAdd,  val ) }
    })
}
//------------------------------

// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...

// Config Data transfer
//set
config.preview = true

//get
config.preview

// delete
config.preview = undefined

Vâng, bạn có thể tước phần bí danh với .bind(...). Tuy nhiên tôi chỉ cần đặt nó vào vì nó thực sự tốt để biết về điều này. Tôi đã mất hàng giờ để tìm hiểu lý do tại sao một get = localStorage.getItem;công việc đơn giản không hoạt động

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

Tôi đã tạo một thứ không phá vỡ các đối tượng Storage hiện có, nhưng tạo một trình bao bọc để bạn có thể làm những gì bạn muốn. Kết quả là một đối tượng bình thường, không có phương thức, với quyền truy cập như bất kỳ đối tượng nào.

Điều tôi đã làm.

Nếu bạn muốn 1 localStoragetài sản là ma thuật:

var prop = ObjectStorage(localStorage, 'prop');

Nếu bạn cần một số:

var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);

Mọi thứ bạn làm prophoặc các đối tượng bên trong storage sẽ được lưu tự động vào localStorage. Bạn luôn chơi với một vật thật, vì vậy bạn có thể làm những thứ như thế này:

storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});

Và mọi đối tượng mới bên trong một đối tượng được theo dõi sẽ được tự động theo dõi.

Nhược điểm rất lớn: nó phụ thuộc vào Object.observe()vì vậy nó có hỗ trợ trình duyệt rất hạn chế. Và có vẻ như nó sẽ không xuất hiện trên Firefox hay Edge bất cứ lúc nào.

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

Nhìn này

Giả sử bạn có mảng sau được gọi là phim:

var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown", 
              "Kill Bill", "Death Proof", "Inglourious Basterds"];

Sử dụng hàm Stringify, mảng phim của bạn có thể được biến thành một chuỗi bằng cách sử dụng cú pháp sau:

localStorage.setItem("quentinTarantino", JSON.stringify(movies));

Lưu ý rằng dữ liệu của tôi đang được lưu trữ dưới khóa gọi là quentinTarantino.

Lấy dữ liệu của bạn

var retrievedData = localStorage.getItem("quentinTarantino");

Để chuyển đổi từ một chuỗi trở lại một đối tượng, hãy sử dụng hàm phân tích JSON:

var movies2 = JSON.parse(retrievedData);

Bạn có thể gọi tất cả các phương thức mảng trên phim2

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

Để lưu trữ một đối tượng, bạn có thể tạo một chữ cái mà bạn có thể sử dụng để đưa một đối tượng từ một chuỗi sang một đối tượng (có thể không có ý nghĩa). Ví dụ

var obj = {a: "lol", b: "A", c: "hello world"};
function saveObj (key){
    var j = "";
    for(var i in obj){
        j += (i+"|"+obj[i]+"~");
    }
    localStorage.setItem(key, j);
} // Saving Method
function getObj (key){
    var j = {};
    var k = localStorage.getItem(key).split("~");
    for(var l in k){
        var m = k[l].split("|");
        j[m[0]] = m[1];
    }
    return j;
}
saveObj("obj"); // undefined
getObj("obj"); // {a: "lol", b: "A", c: "hello world"}

Kỹ thuật này sẽ gây ra một số trục trặc nếu bạn sử dụng chữ cái mà bạn đã sử dụng để phân tách đối tượng và nó cũng rất thử nghiệm.

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

Một ví dụ nhỏ về thư viện sử dụng localStorage để theo dõi các tin nhắn nhận được từ danh bạ:

// This class is supposed to be used to keep a track of received message per contacts.
// You have only four methods:

// 1 - Tells you if you can use this library or not...
function isLocalStorageSupported(){
    if(typeof(Storage) !== "undefined" && window['localStorage'] != null ) {
         return true;
     } else {
         return false;
     }
 }

// 2 - Give the list of contacts, a contact is created when you store the first message
 function getContacts(){
    var result = new Array();
    for ( var i = 0, len = localStorage.length; i < len; ++i ) {
        result.push(localStorage.key(i));
    }
    return result;
 }

 // 3 - store a message for a contact
 function storeMessage(contact, message){
    var allMessages;
    var currentMessages = localStorage.getItem(contact);
    if(currentMessages == null){
        var newList = new Array();
        newList.push(message);
        currentMessages = JSON.stringify(newList);
    }
    else
    {
        var currentList =JSON.parse(currentMessages);
        currentList.push(message);
        currentMessages = JSON.stringify(currentList);
    }
    localStorage.setItem(contact, currentMessages);
 }

 // 4 - read the messages of a contact
 function readMessages(contact){

    var result = new Array();
    var currentMessages = localStorage.getItem(contact);

    if(currentMessages != null){
        result =JSON.parse(currentMessages);
    }
    return result;
 }
1 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 html5 local-storage , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading