What are the local storages in html5?

html5 Local storage includes: 1. localStorage, whose life cycle is permanent. Unless localStorage information is actively cleared, this information will exist forever; 2. sessionStorage, which is only valid in the current session. Close the page or The browser was later cleared.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 Web storage is local storage, stored on the client, including localStorage and sessionStorage. HTML5 web storage is stored in the form of key/value pairs, usually stored as strings.

localStorage

The localStorage life cycle is permanent. Unless localStorage information is actively cleared, this information will exist forever. The size of the stored data is generally 5MB, and it is only saved on the client (that is, the browser) and does not participate in communication with the server.

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        localStorage.setItem('Author', 'local');
        // 2、从本地存储获取数据
        localStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        localStorage.removeItem('Author');
        // 4、清除所有保存的数据
        localStorage.clear();

sessionStorage

sessionStorage is only valid in the current session, close The page or browser is cleared later. The size of the stored data is generally 5MB, and it is only saved on the client (that is, the browser) and does not participate in communication with the server.

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        sessionStorage.setItem('Author', 'session');
        // 2、从本地存储获取数据
        sessionStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        sessionStorage.removeItem('Author');
        // 4、清除所有保存的数据
        sessionStorage.clear();

Complex data storage

The above are all for storage of simple data types, but when it comes to storage When the data is an object or an array, direct storage is not possible

Incorrect storage:

    var user = {
      username: 'liu',
      password: '123456'
    };
    sessionStorage.setItem('user', user);
    console.log(sessionStorage.getItem('user'));

At this time, the data format needs to be converted.

Before storing data: Use JSON.stringify to convert the object into a string

After obtaining the data: Use JSON.parse to convert Convert string into object

    var user = {
      username: 'liu',
      password: '123456'
    };
    user = JSON.stringify(user);
    sessionStorage.setItem('user', user);
    var account = sessionStorage.getItem('user');
    console.log(account);
    account = JSON.parse(account)
    console.log(account);

Recommended tutorial: "html video tutorial"

The above is the detailed content of What are the local storages in html5?. For more information, please follow other related articles on the PHP Chinese website!