JS 中Json字符串+Cookie+localstorage

以下是对于“JS中JSON字符串+Cookie+localStorage”的完整攻略：

1. 什么是JSON字符串？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript语言的子集，由Douglas Crockford在2001年首次提出。JSON字符串是指符合JSON格式规范的字符串。

JSON格式的数据结构包含对象、数组、字符串、数值、布尔值、null以及它们的组合，其中对象是采用键值对的方式表示的。

以下是一个JSON格式的字符串示例（表示一个学生对象）：

{
  "name": "张三",
  "age": 18,
  "gender": "男",
  "hobbies": ["吃饭", "睡觉", "打游戏"],
  "score": {
    "math": 80,
    "chinese": 90,
    "english": 85
  }
}

2. 什么是Cookie？

Cookie是一种存储在客户端（浏览器）中的小型数据文件。它可以用来存储用户的登录状态、语言偏好、购物车内容等信息。

在JavaScript中，可以使用document.cookie来读取和设置Cookie。例如，下面的代码创建了一个名为username，值为lily，有效期为1小时的Cookie：

document.cookie = "username=lily; expires=" + new Date(Date.now() + 3600000).toUTCString();

3. 什么是localStorage？

localStorage是一种HTML5引入的本地存储机制，它可以在客户端（浏览器）中长期存储数据。与Cookie相比，localStorage具有存储容量大、不随每次请求发送到服务器端、不受Cookie清理的影响等优点。

在JavaScript中，可以使用window.localStorage对象来读取和设置localStorage。例如，下面的代码创建了一个名为username，值为lily的localStorage：

localStorage.setItem('username', 'lily');

4. JSON字符串与Cookie、localStorage的应用

在JavaScript开发中，我们常常需要将数据以JSON格式保存在Cookie或localStorage中，以便在浏览器中跨页面或跨域访问。下面分别介绍一下两个应用场景的示例：

4.1 将JSON字符串保存在Cookie中

// 将JSON字符串保存在Cookie中
function setJsonToCookie(key, json) {
  // 对JSON字符串进行URI编码
  var value = encodeURIComponent(JSON.stringify(json));
  // 保存Cookie
  document.cookie = key + '=' + value + ';expires=' + new Date(Date.now() + 3600000).toUTCString() + ';path=/'; // 设置有效期为1小时，路径为根目录
}

// 从Cookie中获取JSON字符串
function getJsonFromCookie(key) {
  var cookies = decodeURIComponent(document.cookie).split(';'); // 获取Cookie字符串并对其中的URI编码进行解码
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf(key + '=') == 0) {
      return JSON.parse(decodeURIComponent(cookie.substring(key.length + 1))); // 对JSON字符串进行解码并返回
    }
  }
  return null; // 如果没有找到指定的key，返回null
}

// 示例
var student = {
  name: '张三',
  age: 18,
  gender: '男',
  hobbies: ['吃饭', '睡觉', '打游戏'],
  score: {
    math: 80,
    chinese: 90,
    english: 85
  }
};
setJsonToCookie('student', student); // 将学生对象保存在Cookie中
var studentFromCookie = getJsonFromCookie('student'); // 从Cookie中获取学生对象
console.log(studentFromCookie.name); // 输出“张三”

4.2 将JSON字符串保存在localStorage中

// 将JSON字符串保存在localStorage中
function setJsonToLocalStorage(key, json) {
  localStorage.setItem(key, JSON.stringify(json)); // 对JSON对象进行序列化并保存
}

// 从localStorage中获取JSON字符串
function getJsonFromLocalStorage(key) {
  var json = localStorage.getItem(key); // 获取JSON字符串
  return JSON.parse(json); // 对JSON字符串进行解析并返回
}

// 示例
var student = {
  name: '张三',
  age: 18,
  gender: '男',
  hobbies: ['吃饭', '睡觉', '打游戏'],
  score: {
    math: 80,
    chinese: 90,
    english: 85
  }
};
setJsonToLocalStorage('student', student); // 将学生对象保存在localStorage中
var studentFromLocalStorage = getJsonFromLocalStorage('student'); // 从localStorage中获取学生对象
console.log(studentFromLocalStorage.name); // 输出“张三”

以上就是本题所要求的关于“JS中JSON字符串+Cookie+localStorage”的完整攻略和示例。