localStorage,sessionStroage和cookies的用法及区别

  1. Cookie
    (1) cookie的存储是限制大小,约4k左右,不适合存储业务数据,尤其是数据量较大的值;
    (2) cookie会每次随http请求一起发送,浪费宽带。
    (但也有场景可能需要到(2)这个特性:比如在项目中你可能需要访问很多接口,而且为了保证安全,你需要传一个标识让你的后端知道这次访问是你发出的,而不是别人的网站发出的,防止非本项目的人随意调接口,你可以在cookie中保存一个标识,项目每次发http请求都会将标识传到后台认证)

  2. localstroage:
    (1) 存储数据量大;
    (2) 不会随http请求一起发送;
    (3) 在浏览器的隐私模式下不能读取;
    (4) 不能被爬虫读取

  3. localStorage与sessionStroage区别
    (1)localStroage是将信息存储在硬件设备中的,关闭浏览器或网页也不会消失;
    (2)sessionStroage的有效期只是网页在浏览器打开到关闭的时间段
    (3)sessionStroage不能在不同的浏览器窗口共享,即使是同一个页面;localStroage在所有的同源窗口中都是共享的;cookie也是在所有的同源窗口中共享的;

    使用localStorage时需要注意的事项:
    一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串,并且我们在读取的时候需要JSON.parse()方法将其转化成JSON格式。

    这里我封装了一个方法需要的可以直接用,就不需要来回转化了!!!!!

//引用了store库
import Store from 'store'
export default {
    //保存localstorage方法(key参数是存入localstorage的键值;user参数是要传输的对象)
    save (key,user) {
        Store.set(key, user);
    },
    
    //读取localstorage方法
    get(key){
        return Store.get(key)||{};
    },
    
    //删除localstorage方法
    remove(key){
        Store.remove(key);
    }
}

引用了store库,这个库对localstorage进行了封装,库中还有一些其他方法我没有列出来,需要的或感兴趣的可以去github上搜store看一下。

你可能感兴趣的:(JavaScript)