localstorage用法及拓展

一、什么是localStorage

        在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)

二、localStorage的优势和劣势

        1、优势  

                localStorage拓展了cookie的4K限制

                localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

        2、劣势

                浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
                目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
                localStorage在浏览器的隐私模式下面是不可读取的
                localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
                localStorage不能被爬虫抓取到
                localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

三、localStorage常用方法
        我们首先在Chrome浏览器的控制台输入localStorage来查看其自带的方法。摘录了一些常用的API如下表所示

名称	作用
setItem	存储数据
getItem	读取数据
clear	清空localStorage上存储的数据
removeItem	删除某个具体变量
key	读取第i个数据的名字或称为键值(从0开始计数)
length	获取localStorage存储变量的个数

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

// 自身方法
localStorage.setItem('name', '炽热');
// .方法
localStorage.namePro = '温存';
// []方法
localStorage["nameMax"] = '落寞';

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

// 自身的方法
console.log(localStorage.getItem('name'));    //炽热
// .方法
console.log(localStorage.namePro);            //温存
// []方法
console.log(localStorage["nameMax"]);         //落寞

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

// 自身方法
localStorage.setItem("name", "杰瑞");
// .方法
localStorage.namePro = "汤姆";
// []方法
localStorage["nameMax"] = "章鱼哥";

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

// 自身方法
localStorage.removeItem("name");
// .方法
delete localStorage.namePro;
// []方法
delete localStorage["nameMax"];

5.获取所有的值

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

6.清除所有的值

localStorage.clear()

7.判断是否具有某个key，hasOwnProperty方法

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

8.注意事项

        1.localStorage特定于页面的协议，不是同一域名，不能访问。

         2.有长度限制，5M左右，不同浏览器大小会有不同。

        3.生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。

         4.浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。

        5.兼容IE8以上浏览器 6.只能存储字符串类型，需要转成字符串存储。

sessionStorage

sessionStorage的存取方法和localStorage一样，可以参考上面。

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

cookie

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件,但只能储存4kb的数据;目的是用于辨别用户身份，记录跟踪购物车的商品信息（如数量）、记录用户访问次数等

原理：

客户端请求服务器时，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。而客户端浏览器会把Cookie保存起来。当浏览器再请求服务器时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器通过检查该Cookie来获取用户状态。

sessionStorage、localStorage和cookie的区别 
共同点：都是保存在浏览器端、且同源的 
区别： 
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 
2、存储大小限制也不同：cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 
3、数据有效期不同：sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 
4、作用域不同：sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 ，所谓的浏览器页面之间共享信息只能由localStorage来完成，并且前提是相同的域名、协议和端口号，对于sessionStorage来说，即使域名、协议和端口相同，那么sessionStorage的信息也是无法共享的