localStorage简介

什么是localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。通常为string。

localStorage写入

        if (!window.localStorage) {
            alert("浏览器不支持localstorage");
        } else {
            var storage = window.localStorage;
            //写入a字段
            storage.setItem('a', '我是a');
            //写入b字段
            storage.b = '我是b';
            //写入c字段
            storage['c'] = '我是c';
            console.log(typeof storage['a']);
            console.log(typeof storage['b']);
            console.log(typeof storage['c']);
        }

上面介绍的是localStorage的三种写入方式，来看一看打印的结果和保存的值。

打印结果

保存的值

现在我们可以发现在浏览器中已经有我们存进去的值。下面说一说取值。

localStorage的读取

 //第一种方法读取
            var a = storage.a;
            console.log(a);
            //第二种方法读取
            var b = storage['b'];
            console.log(b);
            //第三种方法读取
            var c = storage.getItem('c');
            console.log(c);

这里是三种取值方式。看一下打印的结果。取到的值就是我们上面保存进去的值；

取值结果

localStorage的修改

其实localStorage的修改非常的简单，也就相当于重新写入一下需要保存的值。这里也需要注意，如果有需要保存多个值，那么他们的名字不能重复，否则就会造成覆盖，来看一下代码。

        storage.setItem("a", '我是修改过后的a');
        storage.b = '我是修改过后的b';
        storage['c'] = '我是修改过后的c';

修改过后的结果

现在的值已经进行了修改，进行打印得到的结果是这样的

打印结果

localStorage的删除

1.删除全部的内容

  storage.clear(); 

删除全部

如果打印的时候没有取到对应的键值对，则会打印undefined

没有取到对应值

2.删除某个键值对的内容

storage.removeItem("a");

删除一个

我是分割线

好了，localStorage的基本属性已经介绍完了，本人学识有限，如有错误，望指出。谢谢。