js-cookie,sessionStorage和localStorage

最新推荐文章于 2023-04-21 11:12:38 发布

hearthygg

最新推荐文章于 2023-04-21 11:12:38 发布

阅读量431

点赞数 1

文章标签： cookie

本文链接：https://blog.csdn.net/a1_4df/article/details/119086580

版权

js-cookie

cookie存在的不足

由于cookie与IE中提供的持久化用户数据的容量限制以及数据安全问题，不能大量存储数据和安全数据,它存在许多的限制,它存在一些限制如下:

1. cookies的大小被限制在4KB

2. cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽

3. 要正确操纵cookies是很困难的

cookie的简单使用

//创建简单的cookie 

Cookies.set('name', 'value'); 

//创建有效期为7天的cookie 

Cookies.set('name', 'value', { expires: 7 }); 

//为当前页创建有效期7天的cookie 

Cookies.set('name', 'value', { expires: 7, path: '' });

//取值

Cookies.get('name'); // => 'value'

//获取所有cookie Cookies.get(); // => { name: 'value' }

//删除

Cookies.remove('name');

//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径

Cookies.remove('name', { path: '' });

//json

Cookies.set('name', { foo: 'bar' });//'{"foo":"bar"}'



//第三个参数{}

expires

定义有效期。如果传入Number，那么单位为天，你也可以传入一个Date对象，表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。

path

string，表示此cookie对哪个地址可见。默认为”/”。

domain

string，表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见。

secure

true或false，表示cookie传输是否仅支持https。默认为不要求协议必须为https。

还有就是使用的时候要在bootcdn上找到js-cookie并引入如下所示

<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.js"></script>

 <script>
        // 当文件正常引入之后,会抛出一个Cookies对象进行操作
        Cookies.set('name','xiaoming',{expires: 7,path:''});
        console.log(Cookies.get()); //获取所有
        Cookies.remove('name',{path : ''}); //如果写了路径,那么删除的时候path也要加上
        console.log(Cookies.get());
    </script>

本地存储

随着互联网的发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性的在本地存储大量的数据，h5新方案新出了两种存储方式sessionStorage和localStorage。

本地存储的特性

1.数据是存储在用户的浏览器中的

2.设置和使用也非常的方便，甚至页面刷新也不会丢失数据

3.容量也是蛮大的，不像cookie只有4kb,sessionStorage5M，localStorage约20M.

4.只能存储字符串，可以将对象JSON.Stringify()编码后存储

Storage类型提供了大量的存储空间来存储键值对，Storage实例与其他对象类似，Storage类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串。

Storage对象提供的方法

setItem(name,value) 为指定的name设置一个对应的值

getItem(name) 根据指定的名字name获取对应的值

removeItem(name) 删除由name指定的键值对

clear()

删除所有值;

key(index) 获得index位置处的值的名字

length Storage对象中，键值对的数量

Web Storage分为两种：

1. sessionStorage对象

将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。(仅限当前选项卡)

2. localStorage

将数据保存在客户端本地的硬盘设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

sessionStorage的特性

1.生命周期为关闭浏览器窗口

2.在同一个页面下数据可以共享

3.以键值对的形式出现

localStorage的特性

1.生命周期永久生效，即使页面关闭了它也还是存在的，除非手动删除。

2.可以多窗口共享（或者说同一个浏览器）共享存储的数据。

3.也是以键值对的形式使用的。

这三种浏览器存储数据的简单比较与使用

新建了两个页面用这几种存储方式看看能不能在不同的页面使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.js"></script>
    <title>1</title>
</head>
<body>
    <input type="text" id="setdata"> <button id="savedata">保存</button>
    <hr>
    <button id="getdata">显示</button>
    <a href="showdata.html">跳转</a>
    <div id="showdata" style="width: 200px; height: 100px; background: chartreuse;"></div>
    <script>
        var data; //保存数据的变量
        var savedata = document.getElementById('savedata');
        var getdata = document.getElementById('getdata');
        var showdata = document.getElementById('showdata');
        savedata.addEventListener('click',function() {
            var date = new Date(new Date().getTime()+10000);
            // data = document.getElementById('setdata').value;
            Cookies.set('name',document.getElementById('setdata').value,{expires: date});
            // sessionStorage.setItem('name',document.getElementById('setdata').value)
            // localStorage.setItem('name',document.getElementById('setdata').value);
        });
        getdata.onclick = function() {
            showdata.innerHTML = Cookies.get('name');
            // showdata.innerHTML = sessionStorage.getItem('name');
            // showdata.innerHTML = localStorage.getItem('name');
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.js"></script>
    <title>2</title>
</head>
<body>
    <!-- <input type="text" id="setdata"> <button id="savedata">保存</button>
    <hr> -->
    <button id="getdata">显示</button>
    <div id="showdata" style="width: 200px; height: 100px; background: chartreuse;"></div>
    <script>
        var data; //保存数据的变量
        // var savedata = document.getElementById('savedata');
        var getdata = document.getElementById('getdata');
        var showdata = document.getElementById('showdata');
        // savedata.addEventListener('click',function() {
        //     data = document.getElementById('setdata').value;
        // });
        getdata.onclick = function() {
            showdata.innerHTML = Cookies.get('name');
            // showdata.innerHTML = sessionStorage.getItem('name');
            // showdata.innerHTML = localStorage.getItem('name');
        }
    </script>
</body>
</html>