美文网首页
web本地存储基础知识

web本地存储基础知识

作者: 淘码小工 | 来源:发表于2017-09-25 11:26 被阅读11次

    HTML5之前的使用本地存储

    在html5之前,本地存储使用的时cookie,他的使用场景如下:

    1. 浏览器获取一个web页面,比如从“pets-R-us.com”获取页面,服务器可以相应发送一个cookie,Cookie中包一个或多个键值对。例如:
    Cookie: pet=dog; age=5; color=black;
    
    1. 下次浏览器向“pets-R-us.com”发出请求时,他会随请求同时发送之前收到的cookie
    2. 服务器可以使用cookie实现个性化的体验,在这里就是向用户推荐一些相关商品,不过cookie还有很多其他的用法,比如定制用户体验,存储数据,维护游戏状态等。

    注意:cookie与一个域关联,如“pets-R-us.com”,而且只能发送给这个域

    缺点

    • 只有4k空间使用,我的应用需要更多的存储空间。
    • 每次都要来回发送cookie,这看起来很低效,特别是使用移动设备,消耗宽带
    • 使用cookie很容易向浏览器传送病毒和其他恶意软件

    HTML5中使用本地存储

    HTML5为我们提供了一个很棒也很简单的Javascript API,可以在浏览器中存储要持久存储的键值对。他会为浏览器每个域分配5到10M的存储空间。应用场景如下:

    1. 页面可以在浏览器的本地存储中存储一个或多个键值对。
    2. 然后用键来获取相应的值。也可以把本地存储的数据发送给服务器,完成一些服务器计算。
    使用web storage API来存取数据
    //存数据
    localStorage.setItem("sticky_0", "pick up dry cleaning");
    //取数据,本地并没有删除,只是得到对应指定键的值
    localStorage.getItem("sticky_0");
    

    也可以把localStorage对象看做一个关联数组,不使用setItem方法,而是像下面这样为键赋一个值:

    //存储
    localStorage["sticky_0"] = "Pick up dry cleaning";
    //获取
    var sticky = localStorage["sticky_0"];
    

    通过属性length属性和key属性,来操作localStorage

    • length属性包含本地存储中的数据项数。
    • key属性是获取localStorage中的键值。
      例如:
    for(var int = 0; i<localStorage.length; i++) {
        var key = localStorage.key(i);
        var value = localStorage[key];
        alert(value);
    }
    

    清除域中所有的本地存储

    localStorage.clear();
    
    使用API来判断是否支持Web Storage
    if(window["localStorage"]) {
          //your localStorage code here...
    }
    

    注意: 使用localStorage,只能使用字符串作为键和值,假如你需要存储整数5,可以存储字符串“5”,也可以使用

    localStorage.setItem("numitems", 1);
    

    看起来这里像是存储的一个整数,不过是Javascrit知道这必须是一个字符串,所以它会帮你将整数转换为一个字符串,其实存储的还是“1”。但是获取的时候需要手动的把他从字符串转化为整数

    var numItems = parseInt(localStorage.getItem("numitems"));
    

    sessionStorage存储,数据项只会在浏览器会话期间存储,一旦会话结束,本地存储的数据项就会被删除。

    • 字符串转化为整数使用parseInt
    • 字符串转化为float类型parseFloat
    • 数组转化为json字符串 JSON.stringify(arr)
    • json串转化为数组 JSON.parse(jsom)

    相关文章

      网友评论

          本文标题:web本地存储基础知识

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