什么是cookie?

Cookies虽然一般都以英文名呈现，但是它还是有一个可爱的中文名“小甜饼”。Cookies是指服务器暂存放在你的电脑里的txt格式的文本文件资料，主要用于网络服务器辨别电脑使用。比如浏览网站时，Cookies 记录下来你输入的一些资料和信息。再访问同一个网站，就会依据Cookie里的内容来判断使用者，送出特定的信息内容给你。

Cookies有什么作用?
首先，它在使用上更便捷，比如你之前在我们新浪微博上进行登陆过用户名。下次，再登陆时，系统就可以默认你的用户名甚至是密码，节省了你的时间。
第二，网站利用Cookies跟踪统计用户访问该网站的习惯，做出自己的服务调整。一方面是方便为用户提供个性化的服务，另一方面，也可以为网站经营策略带来创新，就如同不记名的问卷调查。
 
虽然，Cookies 最广泛的是记录用户登录信息，比如自动登陆，但是它也存在用户信息泄密的问题。另外，也有侵犯隐私的嫌疑，比如我们登陆淘宝后，再登陆其他有淘宝推荐广告的网站会直接出现我们在淘宝搜索过的信息。
 
如何设置Cookies？
由于cookies与用户隐私权的问题并没有相关法律约束，很多网站仍然在利用cookie跟踪用户行为，为此，小编在此特地为你提供限制cookie设置方法。
IE浏览器，菜单“工具-Internet选项-隐私”来查看和修改，通过“隐私”选项中的高低来决定是否允许网站利用cookie跟踪自己的信息，另外，也可以通过手动输入具体的网站设置允许或者禁止使用Cookies进行编辑。
 
说了这么多，该进入我们的主题：选项卡问题刷新后怎么保持原来的选项。
 
以下是是解决问题的代码：
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        li{

            list-style: none;

        }

        #wrap{

            width: 400px;

            height: 340px;

            border: 1px solid black;

            margin: 100px auto;

        }

        ul{

            height: 34px;

            border-bottom: 1px solid black;

            line-height: 34px;

        }

        li{

            float: left;

            width: 132px;

            height: 33px;

            border-left: 1px solid black;

            text-align: center;

            cursor: pointer;

        }

        #box div{

            text-align: center;

            line-height: 100px;

        }

        .on{

            background: pink;

        }

    </style>

    <script>

        window.onload=function(){

            var oDox=document.getElementById("wrap");

            var aLi=document.getElementsByTagName("li");

            var aDiv=oDox.getElementsByTagName("div");

            for(var i=0;i<aLi.length;i++){

                aLi[i].index=i;

                aLi[i].onclick=function(){

                    for(var i=0;i<aLi.length;i++){

                        aLi[i].className="";

                        aDiv[i].style.display="none";

                        setCookie("index",this.index,1)

                    }

                    this.className="on";

                    aDiv[this.index].style.display="block";

                }

            }

            //判断是有cookie值

            if(getCookie("index")){

                for(var i=0;i<aLi.length;i++){

                    aLi[i].className='';

                    aDiv[i].style.display='none'

                }

                aLi[getCookie('index')].className='on';

                aDiv[getCookie('index')].style.display='block';

            }

            ///设置cookie

            function setCookie(name,value,iDay){

                if(iDay){

                    var oDate=new Date();

                    oDate.setDate(oDate.getDate()+iDay);

                    document.cookie=name+'='+value+';path=/;expires='+oDate;

                }else{

                    document.cookie=name+'='+value+';path=/';

                }

            };

            //获取cookie

            function getCookie(name){

                var arr=document.cookie.split("; ");

                for(var i=0;i<arr.length;i++){

                    var arr1=arr[i].split("=");

                    if(arr1[0]==name){

                        return arr1[1];

                    }

                }

                return "";

            }

        }

    </script>

</head>

<body>

<div id="wrap">

    <ul>

        <li class="on">tab1</li>

        <li>tab2</li>

        <li>tab3</li>

    </ul>

    <div>tab1</div>

    <div>tab2</div>

    <div>tab3</div>

</div>

</body>

</html>
希望能帮到大家。

怎么用cookie解决选项卡问题刷新后怎么保持原来的选项？的更多相关文章

  1. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  2. 基于cookie实现zTree树刷新后，展开状态不变

    1.除了引用jQuery和zTree的JS外,引用cookie的JS: <script type="text/javascript" src="~/Scripts/ ...

  3. 关于iOS11上MJRefresh tabview刷新后，重新加载另一组数据， 回不到顶部或者头尾显示混乱等问题解决

    MJRefresh在iOS11上存在很多bug 比如在iphoenx上首尾仍会显示的问题 刷新数据后tableview置顶不上去等问题 虽然官方给出了适配方案  但是问题还没有的到解决 比如tabvi ...

  4. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  5. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  6. Vuex 页面刷新后store保存的数据会丢失 取cookie值

    在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...

  7. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  8. 解决vuex数据页面刷新后初始化问题

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 利用storage缓存来实现vuex数据的刷新问题 ...

  9. Android list刷新后仍然定位到原来的位置，解决。

    问题: 有一个list,点击item时会做一些事情,然后重新加载数据,此时希望点击重新刷新后item还在原来的位置,而不是跳转到开头. 实现如下: 1.listview添加监听setOnScrollL ...

随机推荐

  1. Hibernate search与Lucene包异常学习心得

    最近使用了了一下Hibernate  Search这个组件 这个组件是对域模型进行全文检索,在全文检索的底层实现上使用了Lucene技术 在进行小测试的时候费了很大的力气去搞定包的问题 我直接通过实例 ...

  2. (11)centos之vim使用

    ZZ 保存并退出 :x 保存并退出 :q 不保存退出

  3. Codeforces 761C Dasha and Password(枚举+贪心)

    题目链接 Dasha and Password 题目保证一定有解. 考虑到最多只有两行的指针需要移动,那么直接预处理出该行移动到字母数字或特殊符号的最小花费. 然后O(N^3)枚举求最小值即可. 时间 ...

  4. vue.js移动端app实战2

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects,简单 ...

  5. 基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)

    AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. Ava ...

  6. CSS3的box-shadow

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  7. CSS属性clip

    http://blog.sina.com.cn/s/blog_68a1582d0100kp59.html CSS属性中有个裁剪属性clip,其实我对这个属性一点都不感冒,因为我感觉它好像没啥用处,但是 ...

  8. 用户空间和内核空间通讯之【Netlink 中】

    原文地址:用户空间和内核空间通讯之[Netlink 中] 作者:wjlkoorey258 今天我们来动手演练一下Netlink的用法,看看它到底是如何实现用户-内核空间的数据通信的.我们依旧是在2.6 ...

  9. Windows下ELK-5.4.3环境搭建

    Windows下ELK-5.4.3环境搭建 一.概述 ELK官网 https://www.elastic.co ELK由Elasticsearch.Logstash和Kibana三部分组件组成: El ...

  10. js 查找一串字符串中一段字符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...