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. 《DSP using MATLAB》Problem 7.24

    又到清明时节,…… 注意:带阻滤波器不能用第2类线性相位滤波器实现,我们采用第1类,长度为基数,选M=61 代码: %% +++++++++++++++++++++++++++++++++++++++ ...

  2. bootstrap简单使用实例

    表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...

  3. JIT（Just in time，即时编译，边运行边编译）、AOT（Ahead Of Time，运行前编译），是两种程序的编译方式

    JIT(Just in time,即时编译,边运行边编译).AOT(Ahead Of Time,运行前编译),是两种程序的编译方式

  4. Oauth2手册 第一章

    来源:https://github.com/jeansfish/RFC6749.zh-cn/blob/master/SUMMARY.md 1. 简介在传统的客户端-服务器身份验证模式中,客户端请求服务 ...

  5. IIS7 伪静态 web.config 配置方法

    <rule name="Redirect" stopProcessing="true"> <match url=".*" ...

  6. PHP中的反射模拟框架中控制器的调度

    <?php class IndexAction { public function index() { echo 'index'; } public function indexBefore() ...

  7. laravel学习资料

    http://blog.csdn.net/qq_20873039/article/category/6246852   --laravel核心概念 /Eloquent ORM / laravel bl ...

  8. linux kernel mini2440 start.S head-common.S 部分注释

    内核版本:2.6.32.2(mini2440光盘源码) github地址:https://github.com/guanglun/mini2440_uboot_linux (for_len分支 htt ...

  9. CentOS 6 update curl

    touch /etc/yum.repos.d/city-fan.repo vi /etc/yum.repos.d/city-fan.repo add the following: [CityFan] ...

  10. mat函数

    mat函数可以将目标数据的类型转换为矩阵(matrix) data=[[1,1,0,3,1],[1,0,1,4,3],[1,0,1,2,4],[0,1,1,1,2], [2,0,0,3,0],[1,0 ...