1，b/s 开发中经常会使用到 cookie，大部分情况下，都是由后端代码实现，那么 js 怎么实现对 cookie 的操作呢？

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>cookie</title>

</head>

<style type="text/css">

    input {

        width: 200px;

        height: 30px;

        text-align: center;

        line-height: 30px;

        font-size: 14px;

        border: none;

    }

</style>

<body>

    <input id="old-text" type="text" />

    <input id="writer" type="button" value="写入或修改COOKIE" />

    <input id="new-text" type="text" />

    <input id="reader" type="button" value="读取COOKIE" />

    <input id="delete" type="button" value="删除COOKIE" />

</body>

<script type="text/javascript">

    // 封装操作 cookie 的方法，主要依赖于 document.cookie，比较简单

    var cookie = function (name, value, options) {

        if (typeof value != "undefined") {

            options = options || {};

            if (value === null) {

                value = "";

                options.expires = -1

            }

            var expires = "";

            if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {

                var date;

                if (typeof options.expires == "number") {

                    date = new Date();

                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000))

                } else {

                    date = options.expires

                }

                expires = "; expires=" + date.toUTCString()

            }

            var path = options.path ? "; path=" + (options.path) : "";

            var domain = options.domain ? "; domain=" + (options.domain) : "";

            var secure = options.secure ? "; secure" : "";

            document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("")

        } else {

            var cookieValue = null;

            if (document.cookie && document.cookie != "") {

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

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

                    var cookie = cookies[i].trim();

                    if (cookie.substring(0, name.length + 1) == (name + "=")) {

                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                        break

                    }

                }

            }

            return cookieValue;

        }

    };

    // 写入或者修改

    document.getElementById('writer').onclick = function(){

        cookie('text', document.getElementById('old-text').value);

    }

    // 读取

    document.getElementById('reader').onclick = function(){

        document.getElementById('new-text').value = cookie('text');

    }

    // 删除

    document.getElementById('delete').onclick = function(){

        cookie('text', null);

    }

    /* 其他配置参数

    cookie("Key", "Value", {

        expires: 7, // 有效期, 单位天, 默认 -1，页面关闭失效

        path: "/", // cookie 存放的路径, 默认为当前页面路径, 跨页面读取可设置为根目录, 或者显示设置 path

        domain:  // Cookie的域名属性，默认是创建该cookie的页面域名,一般不设置

        secure: true // cookie的传输是否要求一个安全协议，例如HTTPS, 默认为 fasle

    });

    */

</script>

</html>

2，H5 新增加的两个 api：sessionStorage，localStorage 他们都遵循 key value 的形式，并且 key value 都只能为字符串

3，分别都有两个方法如 sessionStorage.setItem(key, value) 和 sessionStorage.getItem(key)  使用方法也是相当简单

4，不同的是 sessionStorage 的值在页面关闭后马上失效，localStorage 只要不清理便永远存在

5，localStorage 有储存上限，不同的浏览器各不相同，大约为 2M 左右

HTML5 关于一些本地操作 cookie，sessionStorage，localStorage的更多相关文章

  1. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  2. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  3. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  4. jquery访问浏览器本地存储cookie，localStorage和sessionStorage

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...

  5. cookie,sessionStorage,localStorage

    本文转 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务 ...

  6. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

  7. session,cookie,sessionStorage,localStorage的相关设置以及获取删除

    一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...

  8. 本地存储（cookie&sessionStorage&localStorage）

    好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...

  9. 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

    浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...

随机推荐

  1. 查看当前mysql使用的配置文件是哪个

    my.cnf是mysql启动时加载的配置文件,一般会放在mysql的安装目录中,用户也可以放在其他目录加载.安装mysql后,系统中会有多个my.cnf文件,有些是用于测试的.使用locate my. ...

  2. lua 5.3最简单plugin编写

    #include <windows.h> #include "lauxlib.h" /* Pop-up a Windows message box with your ...

  3. day02 python数据类型

    python里面常见的数据类型 目录 一.int 整形只有一个方法bit_length() 可以显示二进制长度 a = 10b = a.bit_length()print(b)1010 二.bool ...

  4. PageHelper 自动去掉排序参数问题

    PageHelper.startPage( req.getCurrent()   , req.getSize() ,"ordersCreateDate desc" ); 如果 上面 ...

  5. Devexpress gridview cell增加控件

    1.根据上图次序,先添加三类控件类型: 2.根据上图次序设置columnEdit 3.点开ColumnEdit , 设置 check 和 uncheck的 value

  6. Application、QueryString、session、cookie、ViewState、Server.Transfer等

    Application: WebForm1.aspx: protected void Button1_Click(object sender, EventArgs e) { ; Response.Re ...

  7. Android Studio搭建系统App开发环境

    一.前言 在Android的体系中开发普通app使用Android Studio这一利器会非常的方便.但是开发系统app可能就会有些吃力,不过经过一些配置仍然会 很简单.我们知道系统app因为涉及到一 ...

  8. python字符串截取、查找、分割

    Python 截取字符串使用 变量[头下标:尾下标],就可以截取相应的字符串,其中下标是从0开始算起,可以是正数或负数,下标可以为空表示取到头或尾. # 例1:字符串截取 str = '1234567 ...

  9. javax.el.PropertyNotFoundException: Property 'XXX' not found on type bean.XXXXX

    javax.el.PropertyNotFoundException: Property 'XXX' not found on type bean.XXXXX 先检查页面语法是否有问题,后在页面的el ...

  10. gcc ld 链接器相关知识，调试指令（程序员的自我修养----链接、装载与库）

    最近解决一个动态链接上的问题,因为以前从来没有接触过这方面的知识,所以恶补了一下,首先要了解gcc编译指令(makefile),ld链接器的选项(还有连接脚本section指定内存位置),熟悉查看连接 ...