Home / Blog / it

HTML5 本地存储

Author: Vic.Wang 2016/09/30 Tags:cookielocalStoragesessionStoragememory本地存储HTML存储

Cookie:

        //这是一个cookie值
        Cookies.set('key', 'value');

        //链式调用
        Cookies.set('key', 'value').set('hello', 'world');

        //可以额外设置一些参数
        Cookies.set('key', 'value', { domain: 'www.example.com', secure: true });

        //设置缓存时间
        Cookies.set('key', 'value', { expires: 600 });
        Cookies.set('key', 'value', { expires: '01/01/2012' });
        Cookies.set('key', 'value', { expires: new Date(2012, 0, 1) });
        Cookies.set('key', 'value', { expires: Infinity });
                    

localStorage:

永久保存在本地,只能手动清除。

        //设置
        localStorage.setItem('key', 'value');
        localStorage.key = "vic";

        //获得
        localStorage.getItem('key');
        localStorage.key;

        //删除
        localStorage.removeItem('key');

        //清除
        localStorage.clear();
                    

sessionStorage:

浏览器关闭即失效。

        //设置
        sessionStorage.setItem('key', 'value');
        sessionStorage.key = "vic";

        var arr = ['vic', 'sue', 'nlx'];
        sessionStorage.setItem('key', JSON.stringify(arr));

        //获得
        sessionStorage.getItem('key');
        sessionStorage.key;

        //删除
        sessionStorage.removeItem('key');

        //清除
        sessionStorage.clear();
                    

上面的 key 可以换成你自己的名称。

注意:sessionStorage无法在多标签的浏览器中共享,要想数据共享请使用localStorage,建议写成公共方法调用。2017-12-26更新