美文网首页
HTML5 storage

HTML5 storage

作者: 那个轻描淡写的女子 | 来源:发表于2017-04-26 10:36 被阅读7次

    HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。

    HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。Html5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过JavaScript来获取这些数据。

    1、sessionStorage

    检测

    !!window.sessionStorage;

    常用方法

    .key = value

    .setItem(key,value)

    .getItem(key)

    .removeItem(key)

    .clear()

    [javascript] view plain copy

    1.  window.sessionStorage.name = 'rainman';           // 赋值

    2.  window.sessionStorage.setItem('name','cnblogs');  // 赋值

    3.  window.sessionStorage.getItem('name');            // 取值

    4.  window.sessionStorage.removeItem('name');         // 移除值

    5.  window.sessionStorage.clear();                    // 删除所有sessionStorage

    事件:

    window.onstorage

    检测值得变化,浏览器支持不好。

    说明:

    cookie的存储限制在了4k之内,相比来说,session storage有了更大的存储空间,但至于具体多大,这要参照浏览器厂商的具体实现。

    cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而session storage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。

    通过sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。

    session storage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。

    setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码:setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数),而是’16’(字符串)。

    再次使用setItem设置已经存在的key的value时,新的值将替代旧的值。

    当存储中的数据发生改变时,会触发相应的事件(window.onstorage),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。

    2、localStorage

    检测

    !!window.localStorage;

    方法和sessionStorage相同

    说明:

    local storage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。

    而且对于某一个域下来说,local storage是共享的(多个窗口共享一个“数据库”)。

    localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    举例

    [javascript] view plain copy

    1.  //结合JSON.stringify使用更强大

    2.  var person = {'name': 'rainman', 'age': 24};

    3.  localStorage.setItem("me", JSON.stringify(person));

    4.  JSON.parse(localStorage.getItem('me')).name;    // 'rainman'

    5.  /**

    6.   * JSON.stringify,将JSON数据转化为字符串

    7.   *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'

    相关文章

      网友评论

          本文标题:HTML5 storage

          本文链接:https://www.haomeiwen.com/subject/wzcizttx.html