JS中的存储方式(Cookie,localStorage,sessionStorage)

cookie

cookie的封装:
// 设置cookie
 function setCookie(name, value, time){
    if(time){
        let d = new Date()
        d.setDate(d.getDate()+time)
        d = d.toUTCString()
        document.cookie = `${name}=${value};expires=${d}`
    }else{
        document.cookie = `${name}=${value}`
    }
}

// 读取cookie
function getCookie(name){
    let obj = {}
    let arr = document.cookie.split('; ')
    // 遍历数组
    arr.forEach(item=>{
        let newArr = item.split('=')
        obj[newArr[0]] = newArr[1]
    })
    return obj[name]
}

// 删除cookie
function delCookie(name){
    setCookie(name, '', -1)
}
json与Cookie

回顾

json的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
字符串必须使用双引号表示,不能使用单引号。
对象的键名必须放在双引号里面。
JSON.stringify方法用于将一个值转为 JSON 字符串。
JSON.stringify([1,2,3]);
JSON.stringify({ name: "张三" })// '{"name":"张三"}'

JSON.parse方法用于将 JSON 字符串转换成对应的值。
var o = JSON.parse('{"name": "张三"}');

引用

我们可以把js中的对象,转为字符串,存贮在cookie中,从而来存贮复杂的数据

var userObj = {name:"张三",age:18}
var jsonStr = JSON.stringify(userobj);
setCookie('userinfo',jsonStr,7)//把用户的信息存储在cookie中
var arr = [
{name:"张1",age:18},
{name:"张2",age:18},
{name:"张3",age:18}
]
var jsonStr = JSON.stringify(arr);
setCookie('users',jsonStr,7)//把多个账户息存储在cookie中

Cookie缺点

  • cookie可能被禁用;

  • cookie与浏览器相关,不能互相访问;

  • cookie可能被用户删除;

  • cookie安全性不够高;

  • cookie存储空间很小(只有4–10KB左右)

H5新增存储方式

localStorage

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

1、localStorage拓展了cookie的4K限制

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

特点

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、 localStorage本质上是对字符串的读取,有json格式时需要JSON.stringify()转化为字符串。

3、localStorage在浏览器的隐私模式下面是不可读取的,localStorage不能被爬虫抓取到.

代码的实现
检测浏览器是否支持

首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性

if(!window.localStorage){
	alert("浏览器支持localstorage");
}else{
	//主逻辑业务
}
增删改查

存储数据

localStorage.setItem(key,value);

取数据

localStorage.getItem(key);

删除数据

localStorage.removeItem(key);

localStorage.clear() 删除所有

sessionStorage

用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

保存数据语法:

sessionStorage.setItem("key", "value");

读取数据语法:

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法:

sessionStorage.removeItem("key");

删除所有数据:

sessionStorage.clear();

你可能感兴趣的:(javascript,开发语言)