1.存值共有3种方式,localStorage相当于window对象下面的一个属性,所以有[]和.调用,但也具有自身的setItem方法

    1. // 自身方法
    2. localStorage.setItem("name","bonly");
    3. // []方法
    4. localStorage["name"]="bonly";
    5. // .方法
    6. localStorage.name="bonly";

    2.取值也是如此,自身的方法是getItem

    1. // 自身方法
    2. localStorage.getItem("name");
    3. // []方法
    4. localStorage["name"];
    5. // .方法
    6. localStorage.name;

    3.改变的方式,就是相当于给对应的key重新赋值,就会把原来的值覆盖掉

    1. // 自身方法
    2. localStorage.setItem("name","TOM");
    3. // []方法
    4. localStorage["name"]="TOM";
    5. // .方法
    6. localStorage.name="TOM";

    4.移除某一个值,可以通过对象删除属性的关键字delete也可以用自身的方法removeItem

    1. // 自身方法
    2. localStorage.removeItem("name");
    3. // []方法
    4. delete localStorage["name"];
    5. // .方法
    6. delete localStorage.name

    5.获取所有的key

    1. // 通过自身的key
    2. for (var i=0;i<localStorage.length;i++) {
    3. console.log(localStorage.key(i));
    4. }
    1. // 通过for in 循环获取
    2. for(var key in localStorage){
    3. console.log(key);
    4. }

    6.获取所有的值

    1. localStorage.valueOf();取出所有的值

    7.清除所有的值

    1. localStorage.clear()

    8.判断是否具有某个key,hasOwnProperty方法

    1. localStorage.hasOwnProperty("name")
    2. // 如果存在的话返回true,不存在返回false

    9.注意事项

    1. 1.localStorage特定于页面的协议,不是同一域名,不能访问。
    2. 2.有长度限制,5M左右,不同浏览器大小会有不同。
    3. 3.生命周期是永久的,但是数据实际是存在浏览器的文件夹下,可能卸载浏览器就会删除。
    4. 4.浏览器可以设置是否可以访问数据,如果设置不允许会访问失败。
    5. 5.兼容IE8以上浏览器
    6. 6.只能存储字符串类型,需要转成字符串存储。

    10.使用技巧

    1. 1.先判断浏览器是否支持localStorage,通过if(!window.localStorage) return;
    2. 2.单词太长,不方便书写,可以利用 var storage=window.localStorage;
    3. 3.字符串和原始类型需要通过JSON.stringfy转字符串,通过JSON.parse转成对象
    4. 4.通过封装方法实现来回转化