面试题之本地存储

问题1：本地存储有几种方式
答：常用有cookie 、 web storage
还有IndexedDB、 web sql

问题2：cookie存储的方式 跟 web storage方式
cookie的使用方式
1设置过期时间失效（只要设置了过期时间cookie就会存储在硬盘里面）
2当会话结束时失效，即关闭浏览器窗口（如果没有设置Expries，cookie就会存储在内存里面）
3手动删除cookie失效
cookie存储在本地磁盘中
不同的系统存储的位置不不一样
web storage方式
直接通过web storage拥有setItem、getItem、removeItem、clear等方法使用，非常方便

问题3：解释一些cookie和web storage的区别
答：1cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了贷款，另外cookie还需要指定作用域，不可以跨域调用
2除此之外，web storage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要前端开发者自己封装setCookie、getCookie
3但是cookie也是不可或缺的：cookie的作用是与服务器进行交互，
作为HTTP规范的一部分而存在，而web storage仅仅是为了在本地“存储”数据而生。

问题4：你最常用那种方式
答：两种都常用，只是分情况不同使用的就不同

问题5：什么时候使用cookie，什么情况下使用web storage
存储密码这种需要在网络下进行操作的情况下使用cookie
而从服务器中获取一条比较大的数据的时候这种情况下非常依赖带宽，就会使用到web storage存储对象、大量数据，然后从本地存储中获取数据（如一些文章信息或者购物车），可以减小服务器的压力，平常数据变化较小的时候用web storage

封装的一些方法

封装cookie方法：

var cookieUtil={
    // 设置cookie
    set:function(name,value,expries){
        var cookieText = name+'='+value;
        if(expries instanceof Date){
            cookieText += ';expries='+expries;
        }
        console.log(cookieText);
        document.cookie = cookieText;
    },

    // 获取cookie
    get:function(name){
        var cookieName = name+'=';
        var cookieStart = document.cookie.indexOf(cookieName);/* 如果存在返回 */
        if(cookieStart >-1){
            var cookieEnd = document.cookie.indexOf(';',cookieStart);
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            // 取到的内容赋值给cookieValue
            cookieValue = document.cookie.substring(cookieStart+cookieName.length.cookieEnd)
        }
        return cookieValue
    },

    // 清除cookie
    delete:function (name) {
        this.set(name,null,new Date("January 1,2016"));
    },

    // 重置cookie
    unset:function(name,value,expires){
        if(expries instanceof Date){
            expries = new Date("January 1,2017");
        }
        this.set(name,value,expries);
    }
}

封装storage的方法：

/* 
localstorage:
生命周期 : 用户存储，如果不手动删除则不会删除
方法：
setItem : 保存数据
getItem : 获取数据
removeItem : 移除数据
clear : 清除所有数据
*/

var i = 0;

function saveData(){
    i++;
    var data = document.getElementById("input");
    var str =data.Value;
    // 保存数据
    localStorage.setItem("name"+i,ste) //键值对
}

function getData(){
    var text = document.getElementById("msg");
    var str = localStorage.getItem("name2");
    text.innerHTML = str;
}

function removeData() {
    localStorage.removeItem("name1");
}

function clearAllData() {
    localStorage.clear();
}

cookie、localStorage、sessionStorage的区别和使用？

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。 localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
创建和访问localStorage：
1）、设置数据：
var forgetData = {phone:vm.phone}; localStorage.setItem(“forgetData”,JSON.Stringfy(forgetData)); //forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化为字符串格式；
获取数据：
vm.forgetData=JSON.parse(localStorage.getItem(“forgetData”)); //将对象转化为json；
2）、设置：localStorage.name = “zhao”;
获取：localStorage.name //zhao localStorage.setItem(key,value);//设置数据 localStorage.getItem(key);//获取数据 localStorage.removeItem(key);//删除单个数据 localStorage.clear();//清除所有localStorage的数据

sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；

共同点：都是保存在浏览器端，且同源的。
区别：
1. cookie数据始终在同源的http请求中携带即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
2.sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
3.数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；localStorage：始终有效，浏览器窗口关闭也一直保存；cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
4.作用域不同，sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，